Chart.js - 選項

在 Chart.js 中，使用上下文相關的路由，選項從程式碼頂部解析到程式碼底部。我們有不同級別的選項，如下所示：

圖表級別選項

我們有三個圖表級別選項：

options
overrides
defaults

資料集級別選項

Chart.js 為我們提供了以下可在資料集級別使用的選項：

dataset
options.datasets
options
overrides
defaults.datasets
defaults

資料集動畫選項

Chart.js 為我們提供了以下可在資料集動畫級別使用的選項：

Dataset.animation
options.datasets.animation
options.animation
overrides.datasets.animation
defaults.datasets.animation
defaults.animation

資料集元素級別選項

Chart.js 為我們提供了以下可在資料集元素級別使用的選項：

Dataset
options.datasets
options.datasets.elements
options.elements
options
overrides.datasets
overrides.datasets.elements
defaults.datasets
defaults.datasets.elements
defaults.elements
defaults

刻度選項

Chart.js 為我們提供了以下刻度選項：

options.scale
overrides.scales
overrides.datasets.elements
defaults.scales
defaults.scale

外掛選項

Chart.js 為我們提供了以下外掛選項，這些選項提供了一系列路徑，以便在其選項中額外查詢：

options.scale
options.plugins[plugin.id]
(options.[...plugin.additionalOptionScopes])
overrides[config.type].plugins[plugin.id]
defaults.plugins[plugin.id]
(defaults.[...plugin.additionalOptionScopes])

示例

讓我們來看一個示例，在這個示例中，我們將在圖表中使用各種選項：

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 30, 35, 30, 20],
            backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
            borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
            borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            layout: {
               padding: {
                  left: 40,
                  right: 40,
               }
            },
            plugins: {
               legend: {
                  labels: {
                     font: {
                        size: 25,
                        family: 'Helvetica',
                        style: 'bold',
                     }
                  }
               }
            }
         },
      });
   </script>
</body>
</html>

輸出

以下輸出圖表顯示了元素的填充和字型樣式：

列印頁面