ページ

2013/08/17

[Javascript] Chart.jsのグラフをカスタマイズする

 前回の記事では、Chart.jsを利用してグラフを描く方法を学びました。今回はそのグラフをカスタマイズする方法について説明します。

タイトル画像


目次

0.記事の対象者

  • 前回の記事を読んでいる
  • Javascriptの簡単なコードが理解できる

1.事前準備

今回のファイル構成は、前回の記事の状態と変わりません。

  • Chart.js (「Chart.js」ライブラリファイル)
  • main.js (独自Javascript定義ファイル)
  • index.html (グラフが表示されるHTMLファイル)

ファイル構成

ファイルの中身も前回と同じになっていることを前提に説明をしていきます。

グラフをカスタマイズするためには、ChartオブジェクトのLine関数の第二引数に、カスタマイズするためのオプションデータを渡します。

    function show() {
        var ctx = document.getElementById("lineChartCanvas").getContext("2d");
        new Chart(ctx).Line(lineChartData, option);
    }

オプションデータはJSON形式になっています。指定されたキーで値を登録するだけで、グラフをカスタマイズすることができます。

2.目盛り線の幅を変更する

 「scaleLineWidth」の値に対して目盛り線の幅を指定します。

    var option = {
        scaleLineWidth : 10
    }

目盛り線の幅を変更する

3.目盛り線の色を変更する

 「scaleLineColor」の値に対して目盛り線の色を指定します。

    var option = {
        scaleLineWidth : 10,
        scaleLineColor : "rgba(10,200,200,1.0)"
    }

目盛り線の色を変更する

4.グリッド線の幅を変更する

 「scaleGridLineWidth」の値に対してグリッド線の幅を指定します。

    var option = {
        scaleGridLineWidth : 5
    }

グリッド線の幅を変更する

5.グリッド線の色を変更する

 「scaleGridLineColor」の値に対してグリッド線の色を指定します。

    var option = {
        scaleGridLineWidth : 5,
        scaleGridLineColor : "rgba(200,200,0,1.0)"
    }

グリッド線の色を変更する

6.グラフをベジェ曲線にする

 「bezierCurve」の値をtrueにすることで直線のグラフをベジェ曲線にします。

    var option = {
        bezierCurve : true,
    }

グラフをベジェ曲線に変更する

7.グラフ線の太さを変更する

 「datasetStrokeWidth」の値に対してグラフ線の太さを指定します。

    var option = {
        datasetStrokeWidth : 8
    }

グラフ線の太さを変更する

8.グラフ点を非表示にする

 「pointDot」の値をfalseにすることでグラフ点を非表示にします。

    var option = {
        pointDot : false
    }

グラフ点を非表示にする

9.グラフ点の半径を変更する

 「pointDotRadius」の値に対してグラフ点の半径を指定します。

    var option = {
        pointDotRadius : 10
    }

グラフ点の半径を変更する

10.グラフ表示時にアニメーションさせない

 「animation」の値をfalseにすることでグラフ表示時にアニメーションさせないようにします。

    var option = {
        animation : false
    }

11.グラフ表示時のアニメーション速度を変更する

 「animationSteps」の値に対してグラフ表示時のアニメーション速度を指定します。

    var option = {
        animationSteps : 300
    }

このように「Chart.js」ではオプションデータの値を変更することで簡単にグラフをカスタマイズすることこができます。

ここまで紹介してきたオプションは一部になります。より詳しく知りたい方は、下記のリンクを参考にしてください。

Chart.js公式ドキュメント

http://www.chartjs.org/docs/

0 件のコメント:

コメントを投稿