Chart.js - 图例

Chart.js 图例显示有关将在我们的图表或图形上看到的数据集的数据。图例配置选项的命名空间是 options.plugins.legend，而图表图例的全局选项在 Chart.defaults.plugins.legend 中定义。

下表给出了我们可以与图表图例一起使用的各种配置选项的描述 -

姓名 类型 默认 描述
展示 布尔值 真的 如果为真，它将显示图例，否则不显示。
位置 细绳 '顶部' 它用于设置图例的位置。默认为顶部位置。
对齐 细绳 '中心' 它用于设置图例的对齐方式。默认为中心位置。
最大高度 数字 它将设置图例的最大高度（以像素为单位）。
最大宽度 数字 它将设置图例的最大宽度（以像素为单位）
全尺寸 布尔值 真的 顾名思义，如果为 true，则该框将占据画布的整个宽度/高度。
单击时 功能 它是一个回调函数，当您在标签项上注册单击事件时调用。
悬停时 功能 它是一个回调函数，当您在标签项顶部注册“mousemove”事件时调用。
休假 功能 它是一个回调函数，当您在先前悬停的标签项之外注册“mousemove”事件时会调用该函数。
撤销 布尔值 错误的 顾名思义，使用此配置，图例将以相反的顺序显示数据集。如果为 false，则为默认值。
标签 目的 您可以使用各种图例标签配置，例如颜色、字体、填充、boxWidth、boxHeight 等。
保留时间 布尔值 如果为 true，图例将从右向左呈现。
文本方向 细绳 画布的默认值 顾名思义，此配置将强制画布上的文本方向“rtl”或“ltr”来渲染图例，无论画布上指定的 css 如何
标题 目的 您可以使用各种图例标题配置，例如颜色、字体、填充、文本、显示等。

句法

图表图例语法如下 -

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

图例启用属性必须为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>

输出

看一下输出。它显示了各种图例配置 -

Chart.js 图例