Цвет фона по умолчанию для столбцов - PullRequest
Новая
       30

Цвет фона по умолчанию для столбцов

0 голосов
/ 13 ноября 2018

Здравствуйте, как мне установить цвет фона по умолчанию для столбцов набора данных? как на изображении. Серая часть колонн. Таким образом, каждый столбец будет иметь серый цвет фона от 0 до максимального значения.

enter image description here

Вот код моей диаграммы данных. Я смотрю примеры на сайте chart.js, но там я ничего не могу найти об этой ситуации 

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
        datasets: [{
                label: 'Capacity',
                data: [20.7, 10, 40, 2, 100, 43, 34],
                backgroundColor: '#43d100'
            },
            {
                label: 'Confirmed',
                data: [11.4, 100, 20, 42, 10, 20, 65],
                backgroundColor: '#dc1f1f'
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        layout: {
            borderWidth: 0
        },
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    display: false,
                    max: 200,
                    fill: "#07C"
                },
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }]
        }
    }
});

1 Ответ

0 голосов
/ 14 ноября 2018

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

см. следующий рабочий фрагмент ... 

$(document).ready(function() {
    // original datasets
    var chartData = [{
        label: 'Capacity',
        data: [20.7, 10, 40, 2, 100, 43, 34],
        backgroundColor: '#43d100'
    },
    {
        label: 'Confirmed',
        data: [11.4, 100, 20, 42, 10, 20, 65],
        backgroundColor: '#dc1f1f'
    }];

    // max value - background dataset
    var maxValue = 200;
    var maxData = {
        label: 'Max',
        data: [],
        backgroundColor: '#cccccc'
    };

    // subtract each dataset value from max value
    chartData.forEach(function (dataset) {
        dataset.data.forEach(function (value, index) {
            if (maxData.data.length <= index) {
                maxData.data.push(maxValue);
            }
            maxData.data[index] -= value;
        });
    });

    // add background dataset
    chartData.push(maxData);

    var ctx = document.getElementById("data");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
            datasets: chartData  // <-- modified dataset
        },
        options: {
            legend: {
                display: false
            },
            layout: {
                borderWidth: 0
            },
            scales: {
                xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        display: false,
                        max: 200,
                        fill: "#07C"
                    },
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }]
            },
            // remove tooltip for background dataset
            tooltips: {
                filter: function (tooltipItem, data) {
                    return (tooltipItem.datasetIndex < (chartData.length - 1));
                },
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="data"></canvas>
...