Блог

Использование Chart.js , пытаясь отобразить диагональную линию (представляющую цель) поверх гистограммы (представляющей фактическую. Я бы хотел, чтобы фактическая строка накладывалась на гистограмму.

  var ctx = document.getElementById(id).getContext('2d');
window[id] = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Actual',
            data: [10, 20, 30, 40],
            backgroundColor: 'steelblue',
          
        }, {
            label: 'Goal',
                data: [10, 20, 30, 40],
            fill:false,

            // Changes this dataset to become a line
           type: 'line',
           backgroundColor: "red",
           borderColor:"red"
        }],
        labels: ['January', 'February', 'March', 'April']},
    
    options: {
        responsive: true,
        maintainAspectRatio: false,
       
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
 

Но моя диаграмма выглядит так:

Я пытался изменить порядок, используя параметр order: для строки и строки, но это не изменило внешний вид.

РЕШЕНИЕ Способ, которым я заставил это работать, заключался в том, чтобы сначала в наборе данных были линейные элементы.

Добавление order: 1 и order: 2 к наборам данных bar / line не повлияло на отображение.