入門指南

這是即時完成區塊的現成代碼。這是 Chart.js 的基礎。開始之前，請確保你已經準備好了這些。

如何使用配置、渲染和設置區塊來繪製 Chart.js 圖表

開始使用 Chart.js

只需複製下面的代碼，它將立即創建一個圖表。 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting Started with Chart JS with www.chartjs3.com</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartMenu">
      <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
    <script>
    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

    // Instantly assign Chart.js version
    const chartVersion = document.getElementById('chartVersion');
    chartVersion.innerText = Chart.version;
    </script>

  </body>
</html>

Chart.js 區塊

Chart.js 文檔正朝向區塊的方向發展。默認有三個區塊：設置或數據區塊、配置區塊，以及渲染或初始化區塊。這三個區塊被認為是圖表的骨架。

如果需要，你可以添加更多區塊。通常，當某些部分變得更加龐大時，會添加額外的區塊。

設置區塊或數據區塊

設置區塊也被認為是數據區塊。這個區塊基本上是一個常量變量，包含多個與數據相關的 JavaScript 物件。這些物件可以包括數據點、標籤、背景顏色、懸停顏色等等。

其他與圖表數值或數據點相關的常量值也可以放在這裡。設置區塊或數據區塊的代碼如下，應該始終是加載的第一部分。因為所有其他區塊都依賴於數據區塊。 

    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

配置區塊

配置區塊包含了圖表的所有配置。配置區塊應該放在渲染區塊之前。由於這個區塊通常依賴於數據區塊，因為它使用了 data 常量變量。

三個主要部分是圖表類型、選項和數據變量，其中數據變量連結到設置或數據區塊。你可以在代碼中看到，data是一個使用 ES6 JavaScript 代碼的變量。 

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

只有當對象值與常量變量相等時，我們才使用data,。如果常量和對象變量相同，我們可以這樣做。這意味著上面的文本是一種簡寫方式。

如果常量有所不同，則需要像下面這樣完整地編寫代碼。你會看到常量和對象值有所不同，因此我們需要更加詳細地編寫代碼。見下文。 

    // config 
    const config = {
      type: 'bar',
      data: data2,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

渲染區塊或初始化區塊

最后一个块应该始终放在最后的是渲染或初始化块。这个块根据上面的所有代码在 canvas 上绘制图表。这意味着所有的代码块必须在这个块之前加载完毕。否则，它会引发错误，并可能遗漏某些代码块。 

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

getElementById 代码指的是 HTML 文档中指定的 canvas id。在这个例子中，它被命名为 “myChart”，但你可以将其更改为你喜欢的任何名称。只需确保在 JavaScript 中正确匹配 canvas id 名称即可。

這頁面有幫助嗎？
是的 22 否 12

“Getting Started”上的2条回复

Its nice and working fine but is not working when creating another chart using the same technique in a same page. I need similar charts to be created 3 times in a single page showing different stats. Can you show how to do that?

发表回复