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

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 不同有两个原因

1. 该解决方案用虚线替换所有条形边框，而正如我所指出的，我只想为数据集中的特定条形设置样式
2. 该解决方案专门用于条形图(它覆盖了 rectangle.draw 函数，而我提到我还想为数据集中的特定点制作点边框虚线(在折线图中) .

Answer 1

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

如果您看一下控制台(console.log(myChart) 如果您敢于深入了解该对象，它会为您提供大量信息)，您将看到每个柱形图都在 myChart.config.data.datasets[0]._meta[0].data[x 中实例化]， 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]);
    }
}

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