38elements.github.io - Chart.jsメモ

Chart.jsメモ

38elements.github.io Spined HTML

Chart.jsメモ Chart.jsメモ 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, rainbow Line orchestration * 全てのLine chartの設定を変更するにはChart.defaults.lineを変更する dataは[8, 3, 5]と[{x: 1, y: 9}, {x:2, y:10}]を指定することができる 前者はlabelsを指定する必要がある pointRadiusを0にすることによって座標点が描画されない 積み上げにする方法 * lineTensionは線のなめらかさを設定する Radar orchestration * 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 ≪Reflectメモ Main HTML Github Star Ranking at 2016/11/16≫