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 ）にあります。

PDF - Download chart.js for free

Previous Next

Related Tags

This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0

This website is not affiliated with Stack Overflow

Email: tutorialpedia@outlook.com