文章/答案/技术大牛

发布

问向图表添加垂直线
EN

Stack Overflow用户

提问于 2019-01-31 04:35:17

回答 2查看 1.2K关注 0票数 0

我正在使用chartkick和chart.js来呈现一些折线图。现在，我正在尝试添加一条垂直线来显示用户输入的注释，但我似乎无法使annotations插件工作。

<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)"
                    },
                    },```

chartkick

javascript

vue.js

chart.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-02 07:32:54

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

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

票数 1

Stack Overflow用户

发布于 2019-01-31 10:04:12

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'
    }
  }
]

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54449104

复制

相似问题

问向图表添加垂直线
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向图表添加垂直线EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向图表添加垂直线
EN