ChartJS Как установить цвет только для одной полосы

#javascript #charts #chart.js

#javascript #Диаграммы #chart.js

Вопрос:

У меня есть эта гистограмма, и мне сложно установить цвет с помощью скрипта только для одной строки индекса. Ниже приведен мой код панели диаграмм:

     var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: "Valor",
            backgroundColor: "rgba(2,117,216,1)",
            borderColor: "rgba(2,117,216,1)",
            data: [],
        }],
    },
    options: {
        plugins: {
            datalabels: {
                anchor: 'end',
                align: 'top',
                formatter: function (value, context) {
                    if (value != 0) {
                        return new Date(value * 1000).toISOString().substr(11, 8);
                    } else {
                        value = " "
                        return value;
                    }
                },
                font: {
                    weight: 'bold'
                }
            }
        },
        responsive: true,
        tooltips: {
            /*  intersect: false, */
            callbacks: {
                title: function (tooltipItem, data) {
                    return data['labels'][tooltipItem[0]['index']];
                },
                label: function (tooltipItem, data) {
                    return new Date(parseInt(data['datasets'][0]['data'][tooltipItem[
                        'index']]) * 1000).toISOString().substr(11,
                        8);
                },
            },
        },
        scales: {
            xAxes: [{
                time: {
                    unit: 'month'
                },
                gridLines: {
                    display: false
                },
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    suggestedMax: 36000,
                    stepSize: 3600,
                    beginAtZero: true,
                },
            }],
        },
    }
});
 

Я пробовал это:
myBarChart.data.datasets[0].backgroundColor[0]

Но это не работает. Если кто-нибудь знает, как это сделать в последней версии chartjs, пожалуйста, помогите мне.

Ответ №1:

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