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が用意されている

SPONSORED LINK


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

今回はこの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

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

関連記事

正規表現を極めるその2

概要 みなさんこんにちはcandleです。今回は前回に引き続き、正規表現を勉強していきましょう。   前提 unixを使用するので、多少、unixコマンドになれていること   サン …

Rails pluginを使ったgemの作り方[1](基本設定編)

概要 みなさんこんにちはcandleです。今回からできればシリーズ物として、railsのgemを作っていこうと考えています。なぜかgemの作り方の詳しい解説サイトが日本語で少ないので未だgemを満足に …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …

Stinger3のURLまたはタブの横にあるロゴを変更する

概要 みなさんこんにちはcnadleです。Stinger3のカスタマイズをしましょう。どんなwebサイトでもURLの周辺にロゴがありますよね。今回はそれを変更します。 条件 WordPressを利用し …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ