Как создать линию на графике с помощью аннотации chartjs-plugin-annotation

Я использую angular, Chartjs и ng2-charts для создания диаграмм в своем проекте. Я пытаюсь сделать среднюю строку, следуя инструкциям, приведенным в репозитории GitHub. Проблема в том, что когда я добавляю этот код, он «не отображает» (я не уверен, что это английское слово) диаграмму. Вот что я хочу воспроизвести:

диаграмма со средней линией

Вот мой код:

public lineVistaChartOptions:any = {
    responsive: true,
    annotation:{

  drawTime: 'afterDatasetsDraw', // (default)


  events: ['click'],


  dblClickSpeed: 350, // ms (default)
  annotations: {
    type: 'line',


    drawTime: 'afterDatasetsDraw',


    id: 'a-line-1',


    mode: 'horizontal',

    // ID of the scale to bind onto
    scaleID: 'y-axis-0',


    value: 50,


    endValue: 100,


    borderColor: 'red',


    borderWidth: 2,


    borderDash: [2, 2],


    borderDashOffset: 1,

    label: {

      backgroundColor: 'rgba(0,0,0,0.8)',


      fontFamily: "sans-serif",


      fontSize: 12,


      fontStyle: "bold",


      fontColor: "#fff",


      xPadding: 0,


      yPadding: 0,


      cornerRadius: 6,


      position: "center",


      xAdjust: 0,



      yAdjust: 0,


      enabled: true,


      content: "Test label"
    }


  }
}

};

То же самое, что и документация.


angular chart.js ng2-charts
person Azoulay Jason    schedule 22.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле вам не нужно устанавливать/использовать все свойства. Установите только те, которые необходимы для выполнения вашего требования. Итак, установки следующих свойств должно быть достаточно, чтобы нарисовать эту горизонтальную линию:

annotation: {
   annotations: [{
      type: 'line',
      id: 'hLine',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 3,  // data-value at which the line is drawn
      borderWidth: 2,
      borderColor: 'black'
   }]
}

также обратите внимание, что свойство annotations — это не просто объект, это массив объектов.

person ɢʀᴜɴᴛ    schedule 22.09.2017
comment
Привет @ɢʀᴜɴᴛ У меня новая проблема, связанная с chartJs, ты можешь мне помочь? Спасибо. /вопросы/46832420/ - person Azoulay Jason; 19.10.2017