reactjs - 标题左对齐 React Chart.js V2

Question

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

我知道这在 chartJS 上是可能的，v3.0.0-alpha.2但据我所知。reactchartjs2.9.30

有谁知道如何实现这一目标reactchartjs？

我认为它会是这样的：

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

任何帮助，将不胜感激。

Answer 1

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

在 React 中，您可以按如下方式注册插件：

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