Chart.js - 标题

Chart.js 标题定义了将在图表或图形顶部看到的文本。标题配置的命名空间是 options.plugins.title，而图表标题的全局选项在 Chart.defaults.plugins.title 中定义。

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

姓名 类型 默认 描述
对齐 细绳 '中心' 顾名思义，使用此配置您可以设置标题的对齐方式。
颜色 颜色 图表.默认值.颜色 它将定义文本的颜色。
展示 布尔值 错误的 如果为真，它将显示标题，否则不显示。
全尺寸 布尔值 真的 顾名思义，如果为 true，则该框将占据画布的整个宽度/高度。
位置 细绳 '顶部' 它用于设置标题的位置。默认为顶部位置。
字体 字体 {权重：'粗体'} 您可以使用各种字体。选项位于“Chart.defaults.font”中。
填充 填充 10 它用于在标题周围应用填充。
文本 字符串|字符串[] ” 顾名思义，它用于显示标题文本。

句法

图表标题语法如下 -

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

titleenabled属性必须为true才能显示数据标签。如果它设置为false，则标题将被停用。

例子

让我们举一个例子，我们将使用各种标题配置 -

<!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>

输出

以下输出图表显示了各种标题配置 -

Chart.js 标题