Question

我添加了注释，用于在我的图表中添加自定义多条垂直线，如果我静态添加它工作正常我的静态代码：

annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 0.019,
            borderColor: 'rgba(189, 189, 189, 0.5)',
            borderWidth: 1,
          },
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 0.033,
            borderColor: 'rgba(189, 189, 189, 0.5)',
            borderWidth: 1,
          },
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 0.305,
            borderColor: 'rgba(189, 189, 189, 0.5)',
            borderWidth: 1,
          },
        ],
      },

这段代码在我的图表中运行正常js我想以动态方式更改代码，以便我修改这样的代码。

const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
    const annotations = map(testValue, el => ({
      type: 'line',
      mode: 'vertical',
      scaleID: 'x-axis-label',
      value: el,
      borderColor: 'green',
      borderWidth: 1,
    }));

但是这不显示我的图表中的行可以任何人告诉我代码中的问题。注意：此图表在react js中实现我正在使用此npm react-chartjs-2仅用于显示图表我的版本也是最新的。

Answer 1

我解决了问题，问题是parseFloat(el)我没有将值作为整数传递，我将annotations更改为annotationsArr

const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
    const annotationsArr = map(testValue, el => {
      return {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: parseFloat(el),
        borderColor: 'rgba(189, 189, 189, 0.5)',
        borderWidth: 1,
      }
    });

现在它对我来说很好用

Answer 2

我启动并运行了注释插件。请确保您使用的是最新版本的软件包：

chart.js: 2.7.3
chartjs-plugin-annotation: 0.5.7
react-chartjs-2: 2.7.4

在使用chart.js版本2.7.2时，它不起作用（控制台中没有错误，但在图表中未绘制/可见线）。

如之前的文章所述，您还应该导入chartjs-plugin-annotation：

import * as React from 'react';
import * as chartjs from 'chart.js';
import { Bar, ChartData, LinearComponentProps } from 'react-chartjs-2';
import 'chartjs-plugin-annotation';

然后，您可以将注释添加到图表选项对象（有关可用的配置选项，请参见https://github.com/chartjs/chartjs-plugin-annotation）

如何使用注释在图表js中添加多个自定义垂直线

2 个答案: