Chart.js - 圖例

Chart.js 圖例顯示了將在圖表或圖形上顯示的資料集的相關資訊。圖例配置選項的名稱空間為 options.plugins.legend，而圖表圖例的全域性選項在 Chart.defaults.plugins.legend 中定義。

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

名稱	型別	預設值	描述
顯示	布林值	true	如果為真，則顯示圖例，否則不顯示。
位置	字串	'top'	用於設定圖例的位置。預設為頂部位置。
對齊方式	字串	'center'	用於設定圖例的對齊方式。預設為居中位置。
最大高度	數字		將以畫素為單位設定圖例的最大高度。
最大寬度	數字		將以畫素為單位設定圖例的最大寬度。
全尺寸	布林值	true	顧名思義，如果為真，則框將佔據畫布的全部寬度/高度。
onClick	函式		當您在標籤項上註冊點選事件時呼叫的回撥函式。
onHover	函式		當您在標籤項頂部註冊“mousemove”事件時呼叫的回撥函式。
onLeave	函式		當您在先前懸停的標籤項外部註冊“mousemove”事件時呼叫的回撥函式。
反轉	布林值	false	顧名思義，使用此配置，圖例將以相反的順序顯示資料集。預設值為 false。
標籤	物件		您可以使用各種圖例標籤配置，例如顏色、字型、填充、boxWidth、boxHeight 等。
Rtl	布林值		如果為真，則圖例將從右到左呈現。
textDirection	字串	畫布的預設值	顧名思義，此配置將強制在畫布上呈現圖例時使用“rtl”或“ltr”文字方向，而不管在畫布上指定的 css 是什麼。
標題	物件		您可以使用各種圖例標題配置，例如顏色、字型、填充、文字、顯示等。

語法

圖表圖例語法如下：

legend: {
   display: true,
   position: 'bottom',
   labels: { color: 'darkred', }
}

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

示例

讓我們來看一個使用各種圖例配置的示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" 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 chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "line",
         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: [
                  "black",
               ],
               borderWidth: 1,
               pointRadius: 5,
            }],
         },
         options: {
               responsive: false,
               plugins: {
                  legend: {
                     display: true,
                     position: 'bottom',
                     align: 'center',
                     labels: {
                        color: 'darkred',
                        font: {
                           weight: 'bold'
                        },
                     }
                  }
               }
            }
         });
   </script>
</body>
</html>

輸出

看一下輸出。它顯示了各種圖例配置：

列印頁面