Нарисуйте горизонтальную пунктирную линию на графике. js 2.0 - PullRequest
Новая
       35

Нарисуйте горизонтальную пунктирную линию на графике. js 2.0

0 голосов
/ 23 марта 2020

Можете ли вы помочь мне, как расширить Chart. js v2.0. Мне нужно нарисовать горизонтальную линию на гистограмме, что-то похожее на: Как показано здесь

Я могу нарисовать пунктирную горизонтальную линию, используя плагин 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

}

Но я хочу изменить цвет линии в первая полоса с белым, как показано на рисунке. Пожалуйста, помогите мне с этим. Заранее спасибо!

...