読者です 読者をやめる 読者になる 読者になる

Chart JS V2.0

chartjs

Chart JS

オープンソースのグラフ描画用のJSで、私がデータをグラフ化するのに十分な機能がある。 公式のドキュメントがすんなり読めなかったので、拡張機能以外の箇所をまとめて整理しておく。

公式ドキュメント : http://www.chartjs.org/docs/

使えるように準備する

  1. Chart.js をインポートする。
  2. グラフを描く領域を準備する。(canvas領域の作成)
  3. 描画データの作成 (Chart のインスタンス)

Chart.js をインポートする。

ドキュメントでいうところの"old-scool"スタイルでとりあえず記述する。

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

グラフを描く領域を準備する。

サイズはとりあえずで設定する。 レスポンシブ(ブラウザのサイズに連動するよう)にもなる。

<canvas id="myChart" width="400" height="400"></canvas>

グラフを描く

基本

<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {...},
    options: {...}
})
</script>

設定を変更する

具体例はこちらにもあります

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

katogiso-tech.hatenablog.com

type

グラフの種類を選択する。

line
直線
散布図も含む
bar
棒グラフ
radar
レーダーチャート
polarArea
鶏頭図
pie
円グラフ
bubble
バブル

オプション

オプションを設定する方法は、2種類あって

  1. 全部に一括で設定
  2. 個々に設定

です。

一括で設定

一括で設定するなら

Chart.defaults.global.hover.mode = 'single'

ただし、一部特別な全体設定として

# name type default
1 defaultFontColor Color '#666'
2 defaultFontFamily String "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
3 defaultFontSize Number 12
4 defaultFontStyle String 'normal'

がある。

個々に設定

個々に設定するとき(または一括設定を上書きするの)は前述の hover.mode は

options: {
  hover: {
    mode: 'label'
  }
}

こんな階層です。

data

基本的な内容は

data: [
  labels:   [ "hoge", "foo", "bar" ],
  datasets: [{ 
               label: '# of Votes',
               data:  [1, 343, 545]
            }],
  xLabels:  [ ],
  yLabels:  [ ]
]

のようになります。 とりあえず使いそうな Line chart に関してだけ追記します。

詳細は公式ドキュメント : http://www.chartjs.org/docs/ を参照する。

line chart

Property Type Usage
data See data point section The data to plot in a line
label String The label for the dataset which appears in the legend and tooltips
xAxisID String The ID of the x axis to plot this dataset on
yAxisID String The ID of the y axis to plot this dataset on
fill Boolean If true, fill the area under the line
lineTension Number Bezier curve tension of the line. Set to 0 to draw straightlines. Note This was renamed from 'tension' but the old name still works.
backgroundColor Color The fill color under the line. See Colors
borderWidth Number The width of the line in pixels
borderColor Color The color of the line.
borderCapStyle String Cap style of the line. See MDN
borderDash Array Length and spacing of dashes. See MDN
borderDashOffset Number Offset for line dashes. See MDN
borderJoinStyle String Line joint style. See MDN
pointBorderColor Color or Array The border color for points.
pointBackgroundColor Color or Array The fill color for points
pointBorderWidth Number or Array The width of the point border in pixels
pointRadius Number or Array The radius of the point shape. If set to 0, nothing is rendered.
pointHoverRadius Number or Array The radius of the point when hovered
pointHitRadius Number or Array The pixel size of the non-displayed point that reacts to mouse events
pointHoverBackgroundColor Color or Array Point background color when hovered
pointHoverBorderColor Color or Array Point border color when hovered
pointHoverBorderWidth Number or Array Border width of point when hovered
pointStyle String, Array, Image, Array The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
showLine Boolean If false, the line is not drawn for this dataset
spanGaps Boolean If true, lines will be drawn between points with no or null data
steppedLine Boolean If true, the line is shown as a steeped line and 'lineTension' will be ignored
var 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],
            spanGaps: false,
        }
    ]
};