Chart.js 如何使用長方圖 -

入門

讓我們開始學習 Chart.js 吧！

按照逐步指南快速上手 Chart.js

從 npm 或 CDN安裝 Chart.js

將 Chart.js與打包器、載入器和前端框架集成

使用 Node.js 中的 Chart.js

或者，請參閱下面的範例或查看樣本。

建立圖表 在這個範例中，我們將為單一資料集建立一個長條圖，並將其渲染到 HTML 頁面上。請將以下程式碼片段新增到您的頁面中：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

你應該會得到類似這樣的圖表：

讓我們來分析一下這段程式碼。

首先，我們需要在頁面上放置一個畫布。為了確保響應式設計，建議為圖表建立一個單獨的容器。

<div>
  <canvas id="myChart"></canvas>
</div>

現在我們有了畫布，可以從 CDN 引入 Chart.js。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

最後，我們可以創建圖表了。我們新增一個腳本，該腳本取得myChartcanvas 元素並new Chart使用所需的配置進行實例化：bar圖表類型、標籤、資料點和選項。

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

您可以在逐步指南中查看使用 Chart.js 的所有方法。

官方網站