Github
Document

グラフの生成

Chart(context, config)はコンストラクタでこれで生成する
使い方 Example

• contextはcanvas要素

• configはtype, data, optionsキーを持つ

options

• デフォルトのoptionsはChart.defaults.global.の下に置く

• グラフのタイプに関係ない共通の設定がある

• font *

• 各グラフ共通の設定 *

• 各グラフ共通のタイトルの設定 *
  デフォルトはChart.defaults.global.title.以下に置く

• 各グラフ共通の銘の設定 *
  Chart.defaults.global.legend.

• 各グラフ共通のToolTipの設定 *
  Chart.defaults.global.tooltips.

• 各グラフ共通のAnimationの設定 *
  Chart.defaults.global.animation.
  アニメーションを無効にするにはoptions.animation = falseにする

• 各グラフ共通のHoverの設定 *
  Chart.defaults.global.hover.

• 各グラフ共通の点や線などの設定 *
  Chart.defaults.global.elements.

• 複数の種類のグラフを表示する方法 *

• responsiveでグラフの大きさが自動で変わるかどうかを設定する *  

type

line, bar, horizontalBar, radar, polarArea, pie, doughnut, bubble

Line chart *

• 全てのLine chartの設定を変更するにはChart.defaults.lineを変更する

• dataは[8, 3, 5]と[{x: 1, y: 9}, {x:2, y:10}]を指定することができる
  前者はlabelsを指定する必要がある

• pointRadiusを0にすることによって座標点が描画されない

• 積み上げにする方法 *

• lineTensionは線のなめらかさを設定する

Radar chart *

Example

• optionではscalesではなくscale *

• 目盛り固定の例

        scale: {
            ticks: {
                min: 0,
                max: 100,
                beginAtZero: true
            }
        },

Axes *

• beginAtZeroで座標が0からはじまる *

• autoSkipをfalseにすると座標のラベルがすべて表示される *

• 時系列データはtimeを使う *

• ticks.maxTicksLimitで最大目盛り数 *
  ticks.maxで目盛りの最大値
  ticks.stepSizeで目盛りの間隔

メソッド *

• chart.destroy()
  chartインスタンスを削除して関連するイベントを削除する

• chart.update(duration, lazy) *
  optionsの内容を反映したグラフを再描画する

• chart.reset()
  グラフを描画してアニメーションが実行される前の状態にする

• chart.render(duration, lazy)
  グラフを描画するが最新のデータは反映しない
  最新のデータを反映したい場合はupdateを利用する

• chart.stop()
  アニメーションをストップ

• chart.resize()

• chart.clear()
  グラフを消す
  アニメーション中は効果がない

• chart.toBase64Image()

• chart.generateLegend()

• chart.getElementAtEvent(e)

• chart.getElementsAtEvent(e)

• chart.getDatasetAtEvent(e)

• chart.getDatasetMeta(index)

chartjs-plugin-zoomはグラフを拡大することが可能になるplugin