Chartを使います.jsグラフライブラリはきれいな応答式フォームを作成します

入門の基礎
Chart.jsはHTML 5ベースのオープンソースグラフライブラリで、美しいグラフを簡潔に描くことができます.
主な機能は次のとおりです.
1、6種類の異なる表タイプをサポートする:曲線図、柱状図、餅状図、レーダー図、極座標領域図、環図.2.HTML 5の開発に基づいて、すべてのブラウザ(IE 7/8を含む)をサポートする.3、他のライブラリに依存せず、4.5 kのサイズしかなく、カスタマイズできます.
Chart.jsはHTML 5 canvasに基づく応答式で、柔軟で軽量化されたグラフライブラリです.ライブラリには6つの異なるグラフタイプがあり、各タイプには一連のカスタムオプションがあります.これらが足りなければ、自分のグラフのタイプを作ることもできます.
Chart.jsの6種類のグラフタイプコードは全部で11 kbしかなく、gzip圧縮処理を行いました.また、このライブラリはモジュール化されており、自分の必要なグラフタイプだけを使用することで、スペースをさらに節約することができます.次は、ライブラリを含むcdnjsリンクです.
JavaScript

な
ヒント からアニメーション ( :tool tipとは、ある にマウスを させてポップアップするヒント )、Chart.jsでは、グラフのほとんどの を できます.このセクションでは、Chartを するためにいくつかの を します.jsはどのように されたのか. のHTMLコードから めます.
XHTML

のプレゼンテーションでは、 れ グラフを します.グラフに を たせるために、ここではいくつかの なオプションを する があります. れ グラフには、ラベル とデータセットが です.ラベルはX に されます. はすでに り のためにいくつかのデータをシミュレートして、これらのデータは1つの の に けられて、 データは の 、 り と セットを っています.
この では、fillColorを に します.FillColorの を しない は、デフォルトを またはグレーに します.これは の にも されます. はRGBA、RGB、hexまたはHSL で され、CSSと じです.
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]
 }]
}

グローバル・オプションの
コードにグローバル を しました.アニメーションステップは、アニメーションの を します. に じて、scaleLineColorやscaleIntegersOnlyなど、より くのオプションを できます.チャーターを することをお めします.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が したグラフのデフォルトは です.responsiveをtrueに すると、 グラフに できます. グラフを にする がある は、グローバル を することをお めします.
JavaScript

Chart.defaults.global.responsive = true;

この れ グラフの を に します.

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

データの と
には のデータを す があります. はこの シーンの な である.このセクションでは、 を し、データを に しながらデータを します.いくつかのランダムデータを し、この では でデータを します.この のほとんどのコードは、 の と ています. のHTML( の と じ)を つと、 のJavaScriptを できます.
まず、 データをグラフに め むコードを する があります.function を してランダム を し、 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()]
 }]
}

グラフの と の にコードを く だ. はindexの を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つのグラフの を する は、 を することです. の では、 1 は、 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はまた、 グラフタイプに のカスタム を します. なグラフがあなたのニーズを たすことができない は、 のグラフタイプを することもできます.ドキュメントを して、ライブラリについて ができるか、 ができないかについての を めることをお めします.