Chart.js - 標題

Chart.js 標題定義了將在圖表或圖形頂部顯示的文字。標題配置的名稱空間是 options.plugins.title，而圖表標題的全域性選項定義在 Chart.defaults.plugins.title 中。

下表列出了我們可以與圖表標題一起使用的各種配置選項的描述：

名稱	型別	預設值	描述
對齊方式 (align)	字串	'center'	顧名思義，使用此配置可以設定標題的對齊方式。
顏色 (color)	顏色	Chart.defaults.color	它將定義文字的顏色。
顯示 (display)	布林值	false	如果為 true，則顯示標題；否則不顯示。
全尺寸 (fullSize)	布林值	true	顧名思義，如果為 true，則框將佔據畫布的全部寬度/高度。
位置 (position)	字串	'top'	用於設定標題的位置。預設為頂部位置。
字型 (font)	字型	{weight: 'bold'}	您可以使用各種字型。"Chart.defaults.font" 中提供了選項。
填充 (padding)	填充	10	用於在標題周圍應用填充。
文字 (text)	字串\|字串陣列	''	顧名思義，它用於顯示標題文字。

語法

圖表標題語法如下：

title: {
   display: true,
   text: 'write heading here',
   color: 'navy',
   position: 'bottom',
}

要顯示資料標籤，title 的 **enabled** 屬性必須為 **true**。如果將其設定為 **false**，則 **title** 將被停用。

示例

讓我們來看一個示例，其中我們將使用各種 **標題** 配置：

<!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: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            plugins: {
               title: {
                  display: true,
                  text: 'Web Application Technologies',
                  color: 'navy',
                  position: 'bottom',
                  align: 'center',
                  font: {
                     weight: 'bold'
                  },
                  padding: 8,
                  fullSize: true,
               }
            }
         },
      });
   </script>
</body>
</html>

輸出

下面的輸出圖表顯示了各種 **標題** 配置：

列印頁面