chart.js-plugin-annotations нескольких горизонтальных линий на одном графике

Question

chart.js-plugin-annotations нескольких горизонтальных линий на одном графике

1

Я использую chart.js 2.6 и chart.js-plugin-annotations 0.5.5 для создания графика.

Мне нужно добавить 3 горизонтальные линии, используя аннотации на одном и том же графике, но только последний в списке. Если я переключу размещение аннотаций, последний будет рисован, поэтому код для каждой аннотации, похоже, будет работать, но показывается только последний.

 annotation: {
   drawTime: 'afterDatasetsDraw',
     annotations: [{
                        id: 'hline1',
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: speedAverage,
                        borderColor: 'green',
                        borderWidth: 1
                    }],
                    annotations: [{
                        id: 'hline3',
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: speedToleranceMin,
                        borderColor: 'red',
                        borderWidth: 1,
                        label: {
                            backgroundColor: "red",
                            content: "Min Value",
                            enabled: true
                        }
                    }],
                    annotations: [{
                        id: 'hline2',
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: speedToleranceMax,
                        borderColor: 'red',
                        borderWidth: 1,
                        label: {
                            backgroundColor: "red",
                            content: "Max Value",
                            enabled: true
                        }
            }]
   }

Что здесь не так? Ожидаемый результат - увидеть все 3 строки не только 1 из них.

Dracounius 05 июль 2017, в 15:09

Источник

Теги:

javascript

chart.js

annotations

1 ответ

Ещё вопросы

ɢʀᴜɴᴛ · Accepted Answer · 2017-07-05T10-54-00.000Z

Вы неправильно используете плагин. Правильный путь должен быть...

annotation: {
   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: speedAverage,
      borderColor: 'green',
      borderWidth: 1
   }, {
      id: 'hline3',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: speedToleranceMin,
      borderColor: 'red',
      borderWidth: 1,
      label: {
         backgroundColor: "red",
         content: "Min Value",
         enabled: true
      }
   }, {
      id: 'hline2',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: speedToleranceMax,
      borderColor: 'red',
      borderWidth: 1,
      label: {
         backgroundColor: "red",
         content: "Max Value",
         enabled: true
      }
   }]
}

Я предположил, что я использовал это неправильно, но я начал использовать javascript несколько недель назад, и мне иногда сложно понять документацию. Решения работает отлично.