Looking for chart.js Answers? Try Ask4KnowledgeBase
Looking for chart.js Keywords? Try Ask4Keywords

chart.jschart.jsを使い始める


備考

Chart.jsは、デザイナーと開発者のためのシンプルでフレキシブルなオープンソースのJavaScriptチャーミングライブラリです。

バージョン情報については、 GitHubを参照してください。

インストールまたはセットアップ

Chart.jsはいくつかの異なる方法で組み込むことができます:

NPM

NPMプロジェクトディレクトリで次のコマンドを実行します。

npm install chart.js --save
 

CDN

chart.js CDNにリンクするHTMLにスクリプトタグを含めます

<html>
   <body>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
   </body>
</html>
 

最新バージョンはcdnjs.com/libraries/Chart.jsにあります。

ローカルコピー

ローカルコピーをサーバー上でホストすることもできます。最後のバージョンはGitHubから入手できます

<html>
   <body>    
      <script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
   </body>
</html>
 

chart.jsの取得の詳細については参照してインストールwww.chartjs.org/docs/を

最小チャートの例

使用しているChart.JSのバージョン(現在のバージョンは2.X)に応じて、構文が異なり、棒グラフ( 2.XのJSFiddle Demo )の最小例が作成されます。

Chart.js 2.X

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  }
              });
        </script>
    </body>
</html>
 

少し高度なバージョンがchart.jsのドキュメントJSFiddle Demo )にあります。


Chart.js 1.X

ただし、レガシーバージョンを使用する必要がある場合は、まずGithubドキュメントを参照してください。

次に、棒グラフ( JSFiddle Demo )の最小限の例を示します。

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart= new Chart(ctx).Bar({
                labels: ["Group 1", "Group 2", "Group 3"],
                datasets: [
                {
                    label: "Group",
                    data: [12, 19, 3]
                }]
            });
        </script>
    </body>
</html>
 

もう少し進んだこのバージョンはGithubのドキュメントJSFiddle Demo )にあります。