在图表中添加垂直线答案

【问题标题】：Adding Vertical lines to charts在图表中添加垂直线
【发布时间】：2019-01-30 20:35:17
【问题描述】：

我正在使用 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)"
                    },
                    },```

【问题讨论】：

标签： javascript vue.js chart.js chartkick

【解决方案1】：

它没有绘制注释的原因是因为在我的 main.js 中我没有导入或注册它

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation'
Chart.plugins.register(ChartAnnotationsPlugin)

【讨论】：

【解决方案2】：

annotations参数value对应x轴或y轴上的value，需要转换时间，直到annotations的值在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'
    }
  }
]

【讨论】：