Chart JS V2.0 - いかにして問題を解くか

Chart JS

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

使えるように準備する

Chart.js をインポートする。
グラフを描く領域を準備する。(canvas領域の作成)
描画データの作成 (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

type

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

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

オプション

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

全部に一括で設定
個々に設定

です。

一括で設定

一括で設定するなら

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,
        }
    ]
};