1

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

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 中实现的，我react-chartjs-2只使用这个 npm 来显示图表，我的版本也是最新的。

4

2 回答 2

3

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

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）

于 2018-11-06T15:41:58.480 回答
0

我解决了这个问题，问题是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,
      }
    });

现在它对我来说很好

于 2018-01-02T15:37:03.377 回答