Question

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

Answer 1

之所以没有绘制注释，是因为在我的main.js中，我没有导入或注册它。

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

Answer 2

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

向图表添加垂直线

2 个答案: