Настройка диаграмм Chart.js

В предыдущей статье была рассмотрена JavaScript-библиотека Chart.js и приведены примеры ее использования на страницах WEB-приложения. В данной статье рассматривается настройка наиболее значимых параметров интерфейса диаграмм :

• заголовок диаграммы, title;
• цвет графиков и секций диаграмм;
• шрифт меток легенды;
• всплывающие подсказки tooltips.

Полную англоязычную версию документации по настройке диаграмм Chart.js Вы можете увидеть здесь.

Заголовок диаграммы, title

Заголовок диаграммы определяет ее название и может быть размещен на одной из сторон. По умолчанию заголовок скрыт. Следующий пример демонстрирует определение заголовка диаграммы 'Пример Chart.js' :

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        title: {
            display: true,
            text: 'Пример Chart.js'
        }
    }
})

Параметры заголовка

Цвет графиков и секций диаграмм

Цвет графика, секции круговой диаграммы или гистограммы может быть определен в виде шестнадцатиричного значения. Chart.js по умолчанию использует глобально определенные значения в Chart.defaults.global.defaultColor.

Следующий код показывает, как можно определить цвет графика, секции или столбца диаграммы с использованием параметра backgroundColor. Параметр borderColor устанавливает цвет рамки. Два параметра hoverBackgroundColor и hoverBorderColor позволяют динамически изменять цвет столбца гистограммы (секции круговой диаграммы) и ее рамки, при наведении на них курсора мыши.

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [{
    label: "Dataset",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    data: [65, 59, 20, 81, 56, 55, 40],
  }]
};

Примеры определения цвета различных диаграмм Chart.js в сервлетах можно увидеть здесь.

Шрифт меток легенды

Библиотека содержит 4 глобальных параметра, позволяющих настраивать шрифт меток легенды. Эти параметры определены в Chart.defaults.global. Глобальные настройки параметров шрифта используются, если они не переопределяются в конфигурации. Например, в следующем коде переопределяется цвет шрифта легенды :

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // переопределение цвета шрифта
                fontColor: 'black'
            }
        }
    }
});

Параметры шрифта

Легенда диаграммы

Легенда отображает на диаграмме наименования наборов данных. В конфигурации диаграммы легенда определяется в области options.legend. Следующий пример демонстрирует представление легенды в нижней части с определением («не чисто») красного цвета шрифта.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

Параметры легенды

Глобальные параметры легенды определены в Chart.defaults.global.legend и включают следующие значения :

Конфигурация метки легенды

Событие onClick

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

legend: {
    display: true,
    onClick :
        function(e, legendItem) {
            var index = legendItem.datasetIndex;
            var ci = this.chart;
            var meta = ci.getDatasetMeta(index);

            // See controller.isDatasetVisible comment
            meta.hidden = meta.hidden === null ? 
                      !ci.data.datasets[index].hidden : null;

            // We hid a dataset ... rerender the chart
            ci.update();
        }
}

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

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // Do the original logic
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [ci.getDatasetMeta(0),
         ci.getDatasetMeta(1)].forEach(function(meta) {
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};
...
legend: {
    display: true,
    onClick : newLegendClickHandler;
}

Всплывающие подсказки, tooltips

Всплывающие подсказки диаграммы определяются в секции options.tooltips. Глобальные настройки всплывающих подсказок определены в Chart.defaults.global.tooltips.

Tooltips параметры

callbacks всплывающей подсказки

Следующий код позволяет каждый прямоугольник в окне подсказки раскрасить в красный цвет с желтой рамкой.

tooltips: {
    callbacks: {
        labelColor: function(tooltipItem, chart) {
            return {
                borderColor: 'rgb(255, 255, 0)',
                backgroundColor: 'rgb(255, 0, 0)'
            }
        }
    }
}