如何获得此代码段中条形图/框的宽度: http://jsfiddle.net/zk9oc4c9/ 确定酒吧的y位?
在上面的小提琴中使用了1.x版本,但在版本2.x中this.chart.ctx.moveTo(0, this.scale.calculateY(lineHeight));
是不可能的。
有了这种坐标,我想在图表中画一条线。使用静态值绘制(虚拟数据)有效,但我需要动态地使用id。 因此,请查看截图如何使用行的静态值来查看图表。虚线的y坐标很简单 - 只是图表的边框。 但我的意思是红色实线。
所以我写了一个插件,这是画线的部分 - 这只是一个摘录:
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
var coord = {
x: // this calculation is already done,
startY: 0,
endY: 0
};
// actually draw the line
ctx.beginPath();
ctx.moveTo(coord.x, coord.startY);
ctx.lineTo(coord.x, coord.endY);
ctx.stroke();
ctx.closePath();
}
});
修改 我做了某种解决方案。这有点像变通方法,但它确实有效:
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// get the meta from any dataset
var meta = chartInstance.getDatasetMeta(0);
var xScale = chartInstance.scales[meta.xAxisID];
var coord = {
x: xScale.getPixelForValue(<value for the line>);
startY: 0,
endY: 0
};
var yScale = chartInstance.scales[meta.yAxisID];
// get the height of the y-axis - subtract the top padding for the chart here
var height = yScale.bottom - yScale.top;
// get categoryPercentage & barPercentage from the chart's configuration
var catPerc = yScale.options.categoryPercentage;
var barPerc = yScale.options.barPercentage;
// calculate the each category height
var catHeight = (height * catPerc) / yScale.ticks.length;
// so calculate the height of a single bar
var barHeight = catHeight * barPerc;
var factor = barHeight / catHeight;
// padding between chat edge and the bar itself
var padding = (catHeight - barHeight) * factor;
// use the top value from which the chart itself is rendered + the padding
coord.startY = yScale.top + padding - 2;
coord.endY = coord.startY + barHeight + 3;
// actually draw the line
ctx.beginPath();
ctx.moveTo(coord.x, coord.startY);
ctx.lineTo(coord.x, coord.endY);
ctx.stroke();
ctx.closePath();
}
});