у нарисовать одну полосу поверх вертикальных полос (зеленая полоса). Я использую Chart JS V2 с Angular 4.

Я нашел некоторый код для рисования линий, но он не работает в Angular 4.

Я использовал также пытался использоватьannotation но это не работает. Команда для добавления аннотации:npm установить chartjs-plugin-annotation --save

Ниже мой код, отлично работает только для рисования вертикальных полос. Может ли кто-нибудь помочь мне нарисовать горизонтальную линию над ним.

Ответ:

устанавливатьnpm install chartjs-plugin-annotation --save

затемimport 'chartjs-plugin-annotation';

this.ctx = document.getElementById("myChart");
    this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: this.barData.getLabels(),
            datasets: [{
                label: this.barData.actualLegendLabel,
                data: this.barData.getLineData(),
                backgroundColor: this.backgroundColorBarOne,
                borderColor: [
                    'rgba(81,117, 194,1)',
                ]}]
        },
        options: {
            scales: {
                responsive: true,
                scaleBeginAtZero: false,
                barBeginAtOrigin: true,
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: false
                    }
                }]
            },
            legend: {
                cursor: "line",
                position: 'top',
                labels: {
                    fontSize: 10,                       
                }
            },
            layout: {
                padding: {
                    left: 3,
                    right: 3,
                    top: 5,
                    bottom: 5
                }
            }, annotation: {
                annotations: [{
                    drawTime: 'afterDraw', // overrides annotation.drawTime if set
                    id: 'a-line-1', // optional
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: '25',
                    borderColor: 'red',
                    borderWidth: 2,           
                    // Fires when the user clicks this annotation on the chart
                    // (be sure to enable the event in the events array below).
                    onClick: function(e) {
                        // `this` is bound to the annotation element
                    }
                }]
            }
        }
    });