如何使ChartJS中的水平线以特定值结束?

时间:2017-07-13 17:34:51

标签: javascript jquery html css chart.js

我正在使用ChartJS和ChartJs注释插件。该插件允许用户在图表上绘制线条。

我试图在折线图上绘制一条水平线,该水平线以特定值结束,而不是一直延伸到图表的末尾。

这是图表应该是什么样子,它是红线标记为' Peak':

enter image description here

该行应以数据数组中的最大值结束。但是现在,水平线一直延伸到图表的末尾,如下图所示。

以下是注释的代码:

annotation: {
                drawTime: 'afterDatasetsDraw',
                events: ['click'],
                dblClickSpeed: 350,
                annotations: [{
                    drawTime: 'afterDraw', // overrides annotation.drawTime if set
                    id: 'a-line-1', // optional
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: '1300',
                    borderColor: 'red',
                    borderWidth: 2,

                    // Fires when the user clicks this annotation on the chart
                    // (be sure to enable the event in the events array below).
                    onClick: function(e) {
                        // `this` is bound to the annotation element
                    }
                }]

是否可以像这样限制线条的宽度?

以下是fiddle

ChartJSChartJS Annotation

0 个答案:

没有答案