最小圖表示例

Created: November-22, 2018

根據你使用的 Chart.JS 版本（當前的版本是 2.X），語法不同，以建立條形圖的最小示例（ JSFiddle Demo for 2.X ）。

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 ）中找到。