最小圖表示例

根據你使用的 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 )中找到。