Question

如何在Chart.js上自定义边框样式

Chart.js 2.2.1

默认情况下，条形和点的边框是实线。如果可能的话，我想通过将边框变成虚线或虚线来引起对特定条纹或线条的注意。

Going through the docs没有找到任何有用的东西。以下是我认为可行的方法

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
        }]
    }
});

这是running live。我怎样才能让边框破碎？

编辑：我的问题与this similar one的不同有两个原因

该解决方案用虚线替换所有条形边框，而正如我所指出的那样，我只想在数据集中设置特定条形
该解决方案专门用于条形图（它覆盖rectangle.draw函数，而我提到我还想为数据集中的特定点创建点边界虚线（在折线图中）。

Answer 1

不应像在 duplicate 中那样编辑所有图表和矩形，而应该只对要用虚线显示的每个条形图进行编辑。

如果您看一下控制台（mAge 为您提供了很多信息，如果您敢于深入了解对象），您会看到每个栏都在{ {1}}的 console.log(myChart) myChart.config.data.datasets[0]._meta[0].data[， x 是数据集的第x个条形图。

<小时/> 知道你应该去哪里，你现在可以编辑]方法。

这是一个简单的功能，您可以使用它来使其工作：

x

您可以在this jsFiddle中看到结果。

如何在Chart.js上自定义边框样式

1 个答案: