Добавление вертикальных линий на графики - PullRequest
Новая
       27

Добавление вертикальных линий на графики

0 голосов
/ 30 января 2019

Я использую chartkick и chart.js для рендеринга некоторых линейных графиков.Прямо сейчас я пытаюсь добавить вертикальную линию, которая отображает заметку, которую вводит пользователь, но я не могу заставить плагин аннотаций работать.

<line-chart width="80vw" :dataset="dataset" :library="chartOptions" class="animated slideInRight delay-0.01s" v-else :data="photon.data.tempF" ytitle="Temperature F" :colors="['#ff0000']" :download="true"></line-chart>





 chartOptions: {
                     annotation: {
                        annotations: [
                        {
                            type: "line",
                            mode: "vertical",
                            scaleID: "x-axis-0",
                            value: "Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)",
                            borderColor: "red",
                            label: {
                            content: "TODAY",
                            enabled: true,
                            position: "top"
                            }
                        }
                        ]
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                console.log(data.labels[tooltipItem.index])
                                console.log(tooltipItem)
                                return [data.datasets[0].data[tooltipItem.index],data.labels[tooltipItem.index]]
                            }
                        }
                    },
                    height: '400px',
                    pan: {
                        enabled: false,
                        mode: 'xy',
                    },
                    zoom: {
                        enabled: true,
                        mode: 'x',
                    },
                    drag: true,
                    gridLines: {
                        zeroLineColor: "rgba(0,255,0,1)"
                    },
                    },```

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Причина, по которой он не рисовал аннотации, заключалась в том, что в моем файле main.js я не импортировал и не регистрировал его 

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation'
Chart.plugins.register(ChartAnnotationsPlugin)
0 голосов
/ 31 января 2019

annotations параметр value соответствует value на оси x или оси y, вам нужно преобразовать время, пока значение аннотации не окажется в диапазоне оси x и будет равно одному изих ： 

annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    // example: value "2019/1/23" ability to match in the x-axis collection
    value: '2019/1/23',
    // value: 'Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)',
    borderColor: 'red',
    label: {
      content: 'TODAY',
      enabled: true,
      position: 'top'
    }
  }
]
...