Question

能帮我如何扩展Chart.js v2.0。我需要在条形图中绘制一条水平线，类似于：As shown here

我能够使用Chart.js插件绘制水平虚线。请在这里找到代码

 afterDraw: function (chart:any) { 
if (typeof chart.config.options.lineAt != 'undefined') {
    var lineAt = chart.config.options.lineAt;
    if (lineAt != 0) { 
        var ctxPlugin = chart.chart.ctx;
        var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
        var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id];
        if (yAxe.min != 0) return;
        ctxPlugin.strokeStyle = "black"
        ctxPlugin.beginPath();
        ctxPlugin.setLineDash([7]);
        ctxPlugin.lineWidth = 1;
        lineAt = (lineAt - yAxe.min) * (100 / yAxe.max);
        lineAt = (100 - lineAt) / 100 * (yAxe.height) + yAxe.top;
        ctxPlugin.moveTo(xAxe.left, lineAt);
        ctxPlugin.lineTo(xAxe.right, lineAt);
        ctxPlugin.stroke();
    }

我已经在ChartOptions下设置了它

export const chartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
    enabled: false,

},
events: ['mousemove'],
onHover: function (event, chartElement) {
    console.log(typeof event)
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';//mouse pointer on hover
},
layout: {
    padding: {
        left: 0,
        right: 0,
        top: 50,
        bottom: 0
    }
},
lineAt: 122188,
cornerRadius: 5

}

但是我想用白色更改第一个栏中的线条颜色，如图所示。请帮我解决一下这个。预先谢谢你！

在Chart.js 2.0中绘制水平虚线

0 个答案: