Использование chartjs-plugin-annotation с ng2-диаграммами - PullRequest
Новая
       101

Использование chartjs-plugin-annotation с ng2-диаграммами

0 голосов
/ 22 декабря 2018

Используя charts.js, chartjs-plugin-annotations и ng2-charts в проекте angular 2, мне нужно аннотировать линейный график с пометкой в ​​виде блока, как показано на рисунке ниже.enter image description here

Все выглядит хорошо, за исключением пометок (красного цвета), которые не отображаются на графике.Код, связанный с аннотациями, размещается в опциях диаграммы 

annotation: {
     drawTime: 'beforeDatasetsDraw',
     annotations: [
        {
        type: 'box',
        id: 'y-axis-box',
        //mode: 'horizontal',
        yScaleID: 'y-axis-0',
        yMax: 2,
        yMin: 0,
        backgroundColor: 'red',
        //value: date,
        borderWidth: 2
        },
      {
        type: 'box',
        id: 'y-axis-1',
        //mode: 'horizontal',
        yScaleID: 'y-axis-0',
        yMax: 5,
        yMin: 4,
        backgroundColor: 'red',
        //value: date,
        borderWidth: 2
        }
    ]
  }

Похоже, что требуется дополнительная настройка, в основном регистрация плагина.Графики заглушаются с использованием директивы baseChart из импортированного ChartsModule в app.module.js 

import {ChartsModule} from 'ng2-charts/ng2-charts';

1 Ответ

0 голосов
/ 25 марта 2019

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

Столкнулся с той же проблемой, но нашел рабочий пример.Очевидно, что вам нужно установить плагин аннотации: 

npm install chartjs-plugin-annotation

После этого вы можете скопировать реализацию, показанную ниже непосредственно.
Линейная диаграмма с примером аннотации

ПростоСкопируйте разметку и TypeScript.Достаточно редактировать только 2 файла.
Никаких дополнительных настроек не требуется.Я только что проверил эту работу сам.

...