左对齐标题 React Chart.js V2

问题描述

我正在尝试将标题左对齐而不是居中（如图所示）。

我知道这在 chartJS v3.0.0-alpha.2 上是可能的，但据我所知，reactchartjs 只能达到 2.9.30。

有人知道如何在 reactchartjs 中实现吗？

我认为它会是这样的：

options={{
      title: {
        position: 'top',align: 'left',},}}

任何帮助将不胜感激。

解决方法

Chart.js Plugin Core API 提供了一系列可用于执行自定义代码的钩子。您可以使用 afterDraw 钩子直接在画布上使用 CanvasRenderingContext2D.fillText() 自行绘制标题。

在 React 中，您可以register the plugin 如下：

componentWillMount() {
  Chart.pluginService.register({
    afterDraw: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let xAxis = chart.scales['x-axis-0'];
      ctx.textAlign = "left";
      ctx.font = "14px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Title",xAxis.left,10);
      ctx.restore();
    }
  });
} 

您还必须在图表顶部定义一些额外的填充，以确保标题显示在 canvas 上。

options: {
  layout: {
    padding: {
      top: 20
    }
  },...

请查看此 StackBlitz 并了解其工作原理。