左对齐标题 React Chart.js V2

Question

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

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

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

我认为它会是这样的：

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

如有任何帮助，我们将不胜感激。

Answer 1

Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using 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 看看它是如何工作的。

Answer 2

您应该使用 align 参数。这设置了标题的对齐方式。您的选择是：

start
center
end

您的 align: 'left' 不是以上之一，不会有任何效果。然而设置 align: 'start' 会给你你想要的：

完整代码如下所示：

<Chart 
    type='line' 
    data={dat} 
    options={{
        plugins: {
            title: {
                display: true,
                align: 'start',
                text: 'Bitcoin Mining Difficulty'
            }
        }
    }} />

我还要提醒您不要将它与 position: 'left' 混淆。 position 将整个标题移动到图表的 top、left、bottom、right 区域之一。 position: 'left' 和 align: start 组合的示例：

左对齐标题 React Chart.js V2

Align Title Left React Chart.js V2

reactjs

chart.js

react-chartist

react-chartjs-2