410013796724260
• Webmoney
R335386147728
Z369087728698
Настройка диаграмм Chart.jsВ предыдущей статье была рассмотрена JavaScript-библиотека Chart.js и приведены примеры ее использования на страницах WEB-приложения. В данной статье рассматривается настройка наиболее значимых параметров интерфейса диаграмм :
Полную англоязычную версию документации по настройке диаграмм 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)' } } } } |