trybeetle

take it slow!!

Chart.jsの使い方


Posted on March 1, 2018, 12:38 a.m.



chart.jsの使用法についてです。

インストール

こちらにインストール方法が書いてあります。npmでインストールするなり、jsファイルをダウンロードし使うなり、CDNを指定するなり多々あります。


使用例

大まかな記載方法として
・canvasタグの記載 ・script内で2Dコンテキストの指定 ・type、data、optionsの指定

下記が公式ページに記載されているサンプルです。


  
  

コンテキストの指定は、下記の様でもOK


  var ctx = $("#myChart");

レスポンシブ対応

canvasタグの外にdivタグで囲えばOK


  

Chartの種類

下記の種類のチャートを作れます。

・Line
・Bar
・Radar
・Doughnut & Pie
・Polar Area
・Bubble
・Scatter
・Area
・Mixed


Chartの編集

下記の様にchartが定義されているとする。


  var myLineChart = new Chart(ctx, config);

Chartの削除


  myLineChart.destroy();

Chartの更新


  myLineChart.data.datasets[0].data[2] = 50;
  myLineChart.update();

Chartのリセット


  myLineChart.reset();

以上、Chart.jsについてでした。


Category:web
Tag: javascript
March 1, 2018, 12:38 a.m.

Comments