图表.js 2.1.6:绘制水平限制线

Chart.js 2.1.6: Drawing horizontal Limit Lines?

本文关键字：水平 绘制 js 图表      更新时间：2023-09-26

我需要为我的折线图和组合(条形图和折线图(绘制水平限制线。Chart.js<2.0，如图所示：

绘制水平线

但是这个解决方案不再适用于chart.js>2.0:

jquery.1.12.1.js:9743 Uncaught TypeError: Cannot read property 'extend' of undefined

那么，我应该如何在Chart.js 2.1.6中绘制限制线呢？

将Chart.Annotation.js添加到您的项目中并执行：

annotation: {
    annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: '25',
        borderColor: 'red',
        borderWidth: 2
    }]
}

在options 中

您可以在chart.js中绘制水平线和垂直线，试试这个，y它正在使用Chart.js Version: 2.2.1

http://plnkr.co/edit/8HJtZ7WKmTEy2gGuOT0v?p=preview

多亏了这个fiddle，我用最新版本的chart.js更新了它，并对此进行了更改。

对于任何对绘制多条极限线(例如，每个数据点一个极限(感兴趣的人来说，我发现一种简单的方法是简单地创建一个混合图表，用一个线系列表示你的极限点。一旦你有了这个，你可以使用以下选项将线点变成平线，并隐藏整个线：

pointStyle: 'line', radius: 20, fill: false, showLine: false,

相关文章：