如何在Chart.js上自定义边框样式
Chart.js 2.2.1
默认情况下，条和点的边框是实线。如果可能的话，我想通过将边框变成虚线来引起对特定条形或线条的注意。
浏览文档并没有发现任何有用的信息。以下是我认为可能有效的方法
var ctx = document.getElementById("myChart");
var borderColors = ['red','blue','black']
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Black"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
borderColor:borderColors,
borderWidth:3,
borderStyle:'dash'//has no effect
}]
}
});
它在这里直播。如何使边框变为虚线？
编辑：我的问题不同于这个类似的问题有两个原因
rectangle.draw函数，而我提到我还想对数据集中的特定点用点划线（在折线图中）。与其像重复一样编辑所有图表和矩形，不应该只对要用虚线显示的每个条进行编辑。
如果您看一下控制台（console.log(myChart) 如果您敢于深入了解该对象，则会为您提供很多信息），您会看到每个条形图都实例化了，即数据集的第x条形图。myChart.config.data.datasets[0]._meta[0].data[x]x
.draw() 方法。
这是一个简单的函数，可以用来使其工作：
function dashedBorder(chart, dataset, data, dash) {
// edit the .draw() function
chart.config.data.datasets[dataset]._meta[0].data[data].draw = function() {
chart.chart.ctx.setLineDash(dash);
Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
// put the line style back to the default value
chart.chart.ctx.setLineDash([1,0]);
}
}
您可以在此jsFiddle中看到结果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句