ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);
然后,我修改了StrangeWill的代码,扩展它以迭代上面的项目数组,并在指定的栏上绘制垂直线。
Chart.types.Bar.extend({
name: 'BarOverlay',
draw: function (ease) {
// First draw the main chart
Chart.types.Bar.prototype.draw.apply(this);
var ctx = this.chart.ctx;
var barWidth = this.scale.calculateBarWidth(this.datasets.length);
for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {
var overlayBar = this.options.verticalOverlayAtBar[i];
// I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
var y = this.scale.calculateY(2000);
var bar_base = this.scale.endPoint
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
ctx.moveTo(x, bar_base);
ctx.lineTo(x, y);
ctx.stroke();
}
ctx.closePath();
}
});
4条答案
按热度按时间7ajki6be1#
我已经创建了一个叫做覆盖图的东西,我已经把它添加到chart.js(https://github.com/leighquince/Chart.js)的分支中,它可以在这种情况下使用。它的工作原理和折线图或条形图一样,唯一的区别是你声明了一个叫做
type
的额外属性,它可以是'line'
或'bar'
。然后只需要调用new Chart(ctx).Overlay(data)
。所以对于你的例子,你可以只有你的条形图,然后提供另一个数据集(用一些比我用过的更好的颜色)来显示线。
第一个
wwtsj6pe2#
我需要类似的东西,但不是一个线 * 图 * 我需要像一个真实的的覆盖线是平的。
只是这样扩展了图表:
我的代码是硬编码的,在“100”标记处画一条线(在本例中,我们希望有一个100%的目标)。
并这样称呼它:
我还发现Quince的代码过时了,不知何故与1.0.2 Chart.js代码不兼容(渲染完全偏离了方向)。
kwvwclae3#
StrangeWill的答案作为基础非常好,但我需要条形图上的数据驱动垂直线,因此将其修改如下:
首先,我向options数组添加了一个属性(添加另一个数据集可能更简洁,但我必须告诉ChartJS忽略它),其中每个选项都是我想要突出显示的数据值索引,大致如下:
然后,我修改了StrangeWill的代码,扩展它以迭代上面的项目数组,并在指定的栏上绘制垂直线。
它并不完美,因为我不熟悉ChartJs的内部代码,特别是我的线条偏离了2条线,虽然我怀疑这是数据数组中的一个栅栏错误,而不是图表计算。然而,希望这对其他人来说是一个有用的进步。
ruyhziif4#
还有https://github.com/chartjs/chartjs-plugin-annotation(通过https://github.com/chartjs/awesome,“与Chart.js相关的令人敬畏的事情的精选列表”):
此插件可在图表区上绘制线条、方框、点、标签、多边形和椭圆。
注解可用于使用线性、对数、时间或类别刻度的折线图、条形图、散点图和气泡图。
但你不能有额外的轴:
注解不适用于不是正好有两个轴的任何图表,包括饼图、雷达图和极坐标面积图。