javascript - Chart js 多个标题

Question

Chart JS 中可以有多个标题吗？ https://www.chartjs.org/

在当前状态下，我使用标题作为图表下方的描述。我还需要在图表顶部添加一个标题。可能吗？

我的情况的另一种选择是是否有另一种方法可以在底部实现描述并将标题保留为顶部标题。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title',
            position: 'bottom',
        }
    }
});

Answer 1

您可以使用Plugin Core API 。它提供了可用于执行自定义代码的不同 Hook 。在下面的代码片段中，我使用 afterDraw Hook 在 Canvas 上绘制标题。这样您就可以根据需要绘制任意数量的标题，为每个标题定义不同的样式，并将它们放置在适合您的位置。

请注意，在图表选项内，我还定义了一些布局填充。这可以防止标题与图表栏重叠。

layout: {
  padding: {
    top: 40
  }
}

Chart.plugins.register({
  afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.font = "18px Arial";
      ctx.fillStyle = "gray";
      ctx.fillText('Top Title', chart.chart.width / 2, 20);
      ctx.restore();
  }
});

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      data: [10, 12, 8, 6],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    layout: {
      padding: {
        top: 40
      }
    },
    title: {
      display: true,
      text: 'Custom Chart Title',
      position: 'bottom',
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>