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

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

関連記事

MysqlのSELECT FROMの結果を美しく、見やすく表示する

概要 みなさんこんにちはcandleです。今回はmysqlのデータベースに関する簡単な記事です。 データベース系の言語は最近、様々出てきましたが、私は未だにMysqlくらいしか触っていません。 私はp …

wordpress skeletonを使った開発環境の構築

はじめに みなさんこんにちはcandleです。wordpressは大変便利なのですが、いまいちgitで管理するのが難しいものです。 というのも、wordpress全体をgit管理対象にしてしまうと、w …

ElastiCacheのmemcachedとEC2上のrailsとdalli-elasticacheを使ってキャッシュ管理する

概要 皆さんこんにちはcandleです。今回はaws上にあるElastiCacheというサービスを使って railsのキャッシュを管理したいと思います。 キャッシュというのはwebサービス上でよく使う …

railsのsimple-captcha gemを使用してform_forを使ったフォームを画像認証する

概要 みなさんこんにちはcandleです。公に開かれたフォームはスパムや総当り攻撃を受けやすいです。 そこで、画像認証を導入して、悪意のあるフォームを拒否してみましょう。 simple-captcha …

phpmyadminでmysqlデータベースの照合順序を変更する

概要 みなさんこんにちはcandleです。 ちょっとした事なのですが、意外に分からなかったのでまとめました。 phpmyadminを使ってデータベースを作ると、うっかり、utf8_general_ci …

  • English
  • 日本語

プロフィール


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

twitter

スポンサードリンク

アーカイブ