joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Chart.js 2.0でy軸の最大値(scales max)と最小値を設定する

投稿日:2016年5月8日更新日:

Pocket

chart.jstop_thumb

概要

みなさんこんにちはcandleです。今回はChart.js2.0でy軸の最大値、最小値を設定する方法を紹介します。
Chart.js 2.0では特に指定しないと自動的に、y軸の最大値を設定してくれますが、場合によっては自分で設定したい場合があります。

前提

Chart jsが用意されている


最大値と最小値を設定する

今回はこのline chartで試します。
default_line_chart-1

結論から書くと以下のようなサンプルソースコードになります。y軸を指定しているのはoptionsのところです。

$(document).on('ready', function() {
  var ctx, data, myChart;
  ctx = document.getElementById('myChart');
  if (ctx !== null) {
    data = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'My First dataset',
          fill: false,
          lineTension: 0.1,
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(75,192,192,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(75,192,192,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };
    return myChart = new Chart.Line(ctx, {
      data: data,
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100
              }
            }
          ]
        }
      }
    });
  }
});

optionsだけ取り出すと以下のようになります。

    myChart = new Chart.Line(ctx, {
      data: data,
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100
              }
            }
          ]
        }
      }
    });

yheight
これでグラフを表示するとy軸の最大値が100になっています。

Trialnerror

coffeeでは以下のようになります。

$(document).on 'ready', ->

  ctx = document.getElementById('myChart')
  if ctx != null
    data =
      labels: ['January','February','March','April','May','June','July']
      datasets: [ {
        label: 'My First dataset'
        fill: false
        lineTension: 0.1
        backgroundColor: 'rgba(75,192,192,0.4)'
        borderColor: 'rgba(75,192,192,1)'
        borderCapStyle: 'butt'
        borderDash: []
        borderDashOffset: 0.0
        borderJoinStyle: 'miter'
        pointBorderColor: 'rgba(75,192,192,1)'
        pointBackgroundColor: '#fff'
        pointBorderWidth: 1
        pointHoverRadius: 5
        pointHoverBackgroundColor: 'rgba(75,192,192,1)'
        pointHoverBorderColor: 'rgba(220,220,220,1)'
        pointHoverBorderWidth: 2
        pointRadius: 1
        pointHitRadius: 10
        data: [65,59,80,81,56,55,40]
        } ]

    myChart = new Chart.Line(ctx,
      data: data
      options:
        scales: yAxes: [ { ticks:
          beginAtZero: true
          min: 0
          max: 100 } ]
    )


まとめ

chart jsが1.0から2にバージョンアップしてこの指定がわからなくて苦労しました。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

fabricを使ってgit のdiffで指定のバージョンからのファイルをアップロード

概要 皆さんこんにちはcandleです。今回はfabricを使ってgit のpush pullを使わないデプロイを実装します。 一般にgit管理されているプロジェクトのデプロイは下の様な図式でデプロイ …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

React開発環境構築コマンドcreate-react-appが便利すぎたのでまとめてみた

English 日本語 概要 みなさんこんにちはcandleです。 今回はcreate-react-appコマンドを使ってreactの開発環境の構築とhello worldあたりまでやってみたいと思い …

react0.14 + gulp + express + babelでReactのチュートリアル環境構築をする

概要 みなさんこんにちはcandleです。今回は、react0.14のnodeの環境構築をします。 react0.14はまだまだ、開発段階にあり、しばしば仕様変更が行われています。 0.13の時では使 …

fabricでvagrantのデフォルトの秘密鍵を使ってサーバにアクセスする

概要 みなさんこんにちはcandleです。今回はfabricを使ってvagrant上のvmにアクセスする方法を紹介します。様々なサイトを閲覧すると、あまりvagrantのデフォルトの鍵を使用して、fa …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ