Настройка диаграмм 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'
        }
    }
})

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

НаименованиеТипЗначение по умолчаниюОписание
displayBooleanfalseПризнак представления заголовка
positionString'top' Позиционирование заголовка; возможные значения : top,left,bottom,right
fontSizeNumber12Размер шрифта
fontFamilyString'Helvetica Neue', 'Helvetica', 'Arial', sans-serif Семейство шрифтов
fontColorColor'#666'Цвет шрифта
fontStyleString'bold'Стиль шрифта
paddingNumber10 Отступ сверху и снизу от заголовка в пикселях
textString''Титульная строка

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

Цвет графика, секции круговой диаграммы или гистограммы может быть определен в виде шестнадцатиричного значения. 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'
            }
        }
    }
});

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

НаименованиеТипЗначение по умолчаниюОписание
defaultFontColorColor'#666' Цвет меток легенды
defaultFontFamilyString 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Семейство шрифтов
defaultFontSizeNumber12 Размер шрифта (пиксель)
defaultFontStyleString'normal' Стиль шрифта

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

Легенда отображает на диаграмме наименования наборов данных. В конфигурации диаграммы легенда определяется в области 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 и включают следующие значения :

НаименованиеТипЗначение по умолчаниюОписание
displayBooleantrue Признак отображения легенды
positionString'top' Местоположение легенды; возможные значения : 'top','left','bottom','right'
fullWidthBooleantrue
onClickFunction Функция обработки нажатия на метку легенды (пример)
onHoverFunction Функция обработки наведения курсора мыши на метку легенды
reverseBooleanfalse Порядок представления набора данных легенды
labelsObject Конфигурация метки легенды (см. метки легенды)

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

НаименованиеТипЗначение по умолчаниюОписание
boxWidthNumber40 Размер расцвечиваемого прямоугольника метки
fontSizeNumber12 Размер шрифта метки
fontStyleString'normal' Стиль шрифта метки
fontColorColor'#666' Цвет текста метки
fontFamilyString 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif Семейство шрифтов меток легенды
paddingNumber10 Расстояние по вертикали между расцвеченными прямоугольниками

Событие 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 параметры

НаименованиеТипЗначение по умолчаниюОписание
enabledBooleantrue Признак подключения всплывающих подсказок
customFunctionnull Подключение функции обработки
modeString'nearest' Режим подключения; возможные значения [point, nearest, index, dataset, x, y]
intersectBooleantrue true - представление подсказки при пересечении курсора с «графиком»
false - постоянное представление подсказки
positionString'average' Позиционирование подсказки; возможные значения [average, nearest];
callbacksObject Функция представления подсказки (пример);
itemSortFunction Функция сортировки элементов подсказки
filterFunction Функция фильтрации элементов подсказки
backgroundColorColor'rgba(0,0,0,0.8)' Цвет фона окна
titleFontFamilyString 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif Шрифт заголовка подсказки
titleFontSizeNumber12 Размер шрифта заголовка подсказки
titleFontStyleString'bold' Стиль шрифта заголовка подсказки
titleFontColorColor'#fff' Цвет заголовка подсказки
titleSpacingNumber2 Расстояние сверху и снизу для каждой строки
titleMarginBottomNumber6 Отступ снизу
bodyFontFamilyString 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif Шрифт подсказки
bodyFontSizeNumber12 Размер шрифта
bodyFontStyleString'normal' Стиль шрифта
bodyFontColorColor'#fff' Цвет текста
bodySpacingNumber2 Отступ сверху и снизу для каждой записи
footerFontFamily String 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif Шрифт нижнего колонтитула
footerFontSize Number 12 Размер шрифта нижнего колонтитула
footerFontStyle String 'bold' Стиль шрифта нижнего колонтитула
footerFontColor Color '#fff' Цвет текста нижнего колонтитула
footerSpacing Number 2 Отступ сверху и снизу для каждой строки нижнего колонтитула
footerMarginTop Number 6 Отступ сверху для нижнего колонтитула
xPadding, yPadding Number 6 Отступ слева/справа и сверху/снизу
cornerRadius Number 6 Радиус угловых рамок
borderColor Color 'rgba(0,0,0,0)' Цвет рамки
borderWidth Number 0 Толщина рамки

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

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

tooltips: {
    callbacks: {
        labelColor: function(tooltipItem, chart) {
            return {
                borderColor: 'rgb(255, 255, 0)',
                backgroundColor: 'rgb(255, 0, 0)'
            }
        }
    }
}
  Рейтинг@Mail.ru