Как добавить несколько пользовательских вертикальных линий в диаграмме JS с помощью аннотации

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,
          },
        ],
      },

этот код работает нормально в моей диаграмме. Я хочу изменить код динамически, чтобы я изменил код следующим образом.

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,
    }));

но это не отображает линию в моем графике, может любой сказать мне, в чем проблема в моем коде. Примечание: эта диаграмма реализована в JS, я использую этот NPM react-chartjs-2 только для отображения графика моя версия также только в актуальном состоянии.

Answer 1

Я получил плагин аннотаций и работает. Пожалуйста, убедитесь, что вы используете последние версии пакетов:

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).

Answer 2

Я решаю проблему, проблема в том, 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,
      }
    });

теперь это работает нормально для меня