Chart.js グラフ ライブラリを使用して美しいレスポンシブ フォームを作成する_JavaScript のヒント

エントリーの基本

Chart.js は、HTML5 に基づいたオープンソースのグラフ ライブラリであり、美しいグラフを便利かつ簡潔に描画できます。

主な機能は次のとおりです:

1. 6 つの異なるテーブル タイプをサポートします: 曲線チャート、棒チャート、円チャート、レーダー チャート、極座標面チャート、およびリング チャート。
2. HTML5 に基づいて開発され、すべてのブラウザ (IE7/8 を含む) をサポートします。
3. 他のライブラリに依存せず、サイズはわずか 4.5k で、カスタマイズできます。

Chart.js は、HTML5 キャンバスに基づいた、応答性が高く、柔軟で軽量なグラフ作成ライブラリです。ライブラリには 6 つの異なるグラフ タイプがあり、それぞれにさまざまなカスタマイズ オプションがあります。これだけでは十分でない場合は、独自のグラフ タイプを作成することもできます。

Chart.js の 6 つのグラフ タイプのコードは合計でわずか 11 KB で、gzip 圧縮されているため、必要なグラフ タイプのみを使用できるため、スペースがさらに節約されます。以下は、ライブラリを含む cdnjs リンクです。

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

利用可能な設定

ツールチップからアニメーション効果まで (校正者注: ツールチップとは、マウスが要素の上を移動したときにポップアップするツールチップを指します)、Chart.js を使用すると、チャートのほぼすべての特性を変更できます。このセクションでは、Chart.js がどのように作成されるかを示すためにいくつかの設定を変更します。次の HTML コードから始めます:

XHTML

<canvas id="canvas"></canvas>

最初のプレゼンテーションでは、折れ線グラフを作成します。チャートを意味のあるものにするために設定する必要のある基本的なオプションがいくつかあります。折れ線グラフには、ラベルの配列とデータセットが必要です。ラベルが X 軸に表示されます。折れ線グラフのデータをモックアップし、それぞれが独自の塗りつぶしの色、線、点のセットを持つ配列に分割しました。

この例では、fillColor を透明に設定します。 fillColor 値を設定しない場合、デフォルトで黒またはグレーになります。他の値についても同様です。色は、CSS と同じように、RGBA、RGB、16 進数、または HSL 形式を使用して定義されます。

JavaScript

var lineData = {
 labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
      'Data 5', 'Data 6', 'Data 7'],
 datasets: [{
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(220,180,0,1)',
  pointColor: 'rgba(220,180,0,1)',
  data: [20, 30, 80, 20, 40, 10, 60]
 }, {
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  data: [60, 10, 40, 30, 80, 30, 20]
 }]
}

グローバル オプションを設定します

コードでは、いくつかのグローバル値を設定しました。 animeSteps はアニメーションの長さを決定します。必要に応じて、scaleLineColor やscaleIntegersOnly などのその他のオプションを変更できます。 Chart.js ドキュメントを参照して、ライブラリで利用できる他のオプションを確認することをお勧めします。

JavaScript

Chart.defaults.global = {
 animationSteps : 50,
 tooltipYPadding : 16,
 tooltipCornerRadius : 0,
 tooltipTitleFontStyle : 'normal',
 tooltipFillColor : 'rgba(0,160,0,0.8)',
 animationEasing : 'easeOutBounce',
 scaleLineColor : 'black',
 scaleFontSize : 16
}

専用のチャート オプションを設定します

グローバル オプションに加えて、特定のグラフ タイプ用の構成オプションがいくつかあります。この折れ線グラフでは、皆さんにインスピレーションを与えることを願って、そのようなオプションを設定します。

JavaScript

Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}

Chart.js によって生成されたグラフは、デフォルトでは応答しません。応答性を true に設定すると、応答性の高いグラフになります。すべてのチャートをレスポンシブにする必要がある場合は、次のようにグローバル値を設定することをお勧めします:

JavaScript

Chart.defaults.global.responsive = true;

以下にこの折れ線グラフの例を示します:

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

動的データの追加と削除

常に変化するデータを表示する必要がある場合があります。株式市場は、このアプリケーション シナリオの典型的な例です。このセクションでは、縦棒グラフを作成し、データを動的に削除しながらデータを追加します。この例では、ランダムなデータを使用し、そのデータを縦棒グラフとして表示します。この例のコードの大部分は前の例と似ています。 HTML (前の例と同じ) を取得したら、独自の JavaScript を追加できます。

まず、チャートに動的データを入力するコードを記述する必要があります。関数式を使用してランダムな値を生成し、それを変数 dData に割り当てます。これらの値は、変更が必要なときにランダムなデータを提供します。前の例と同様に、ラベル配列とデータセットを作成し、任意の fillColor を設定しました。

JavaScript

var dData = function() {
 return Math.round(Math.random() * 90) + 10;
};
var barData = {
 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
      'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 datasets: [{
  fillColor: 'rgba(0,60,100,1)',
  strokeColor: 'black',
  data: [dData(), dData(), dData(), dData(),
      dData(), dData(), dData(), dData()]
 }]
}

次は、グラフのバーを削除および追加するコードを作成します。最初にインデックス値を 11 に初期化し、removeData() と addData(valuesArray,label) という 2 つのメソッドを使用しました。インスタンスのremoveData()メソッドを呼び出すと、チャート内のすべてのデータセットから最初の値が削除されます。 barChartDemo の例では、データ セットの最初の値が削除されます。 addData() を呼び出すと、ラベルとともに配列値が渡され、チャートの最後に新しいデータ ノードが追加されます。以下のコード スニペットは、3 秒ごとにチャートを更新します。

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

チャートの値を更新するもう 1 つの方法は、値を直接設定することです。以下の例では、最初の行は最初のデータセットの 2 番目のバーの値を 60 に設定します。この時点で更新すると、バーは現在の値を 60 にアニメーション化します。

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例（由SitePoint在CodePen上创建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。