#javascript #html #charts #chart.js
#javascript #HTML #Диаграммы #chart.js
Вопрос:
Я использую chart.js Версия: 2.8.0 для отображения столбчатой диаграммы и круговой диаграммы.
Непустые столбчатые и круговые диаграммы отображаются так, как я хочу.
Однако, когда столбчатые и круговые диаграммы пусты или имеют нулевые данные для отображения, существует ли стандартизированный вариант отображения сообщения «Нет данных для отображения!» как для столбчатых, так и для круговых диаграмм, которые могут отображаться вместо пустых или нулевых данных.
Я искал в Google плагин и, следовательно, решение, но найденные мной варианты либо не работают вообще, либо не работают для последней версии chartjs.
Вот моя пустая круговая диаграмма:
new Chart(document.getElementById('pieChartExample01'), {
type: 'pie',
data: {
labels: [
'Views',
'Print Requests',
'PDF Downloads',
'DOCX Downloads',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderWidth: 1,
hoverBorderWidth: 2,
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
borderAlign: 'inner',
data: [0, 0, 0, 0]
}]
},
options: {
title: {
display: false,
text: 'Overall Activity'
}
}
}); <canvas id="pieChartExample01" width="25" height="25"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> Это то, что я хотел бы, чтобы пустая круговая диаграмма отображалась как (предпочтительно с метками):
ОБНОВЛЕНИЕ ДЛЯ ОТВЕТА — 13 апреля 2019
Используя ответ, предоставленный Core972, я решил экстраполировать принятый ответ, чтобы выбранное сообщение можно было отобразить на столбчатой диаграмме и круговой диаграмме с отображаемыми метками данных, а не просто на пустом холсте.
Вот решение, которое я придумал, которое работает с круговыми и столбчатыми диаграммами.
Я не тестировал другие типы диаграмм, но я предполагаю, что они будут работать с тем же подходом.
Несколько указаний на заметку:
-
Когда данные для отображения равны нулю, границы также должны быть равны нулю, иначе отображается раздражающая граница, отображаемая в виде одной строки. Используйте простое условие if else, чтобы скрыть показать границы, если это необходимо.
-
Используйте условие if else для отображения / скрытия сообщения. Если есть данные, скройте сообщение, иначе отобразите сообщение, если данные равны нулю.
-
Я тестировал этот подход только в Chrome и Firefox и, похоже, работает нормально.
Я надеюсь, что это может кому-то помочь! Наслаждайтесь!
КРУГОВАЯ ДИАГРАММА С ОТОБРАЖАЕМЫМИ МЕТКАМИ ДАННЫХ И ПЛАВАЮЩИМ СООБЩЕНИЕМ:
new Chart(document.getElementById('pieChartExample01'), {
type: 'pie',
data: {
labels: [
'Views',
'Print Requests',
'PDF Downloads',
'DOCX Downloads',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderWidth: 0,
hoverBorderWidth: 0,
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
borderAlign: 'inner',
data: [0, 0, 0, 0]
}]
},
options: {
title: {
display: false,
text: 'Overall Activity'
}
}
}); <div style="width: 100%; height: 100%; position: relative;">
<div style="text-align: center; width: 100%; height: 100%; position: absolute; left: 0; top: 100px; z-index: 20;">
<b>No data for you today!</b>
</div>
<canvas id="pieChartExample01" width="25" height="25"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</div> Ответ №1:
Используйте этот плагин, который я слегка модифицировал, который проверяет, равен ли каждый элемент набора данных нулю:
<script>
Chart.plugins.register({
afterDraw: function(chart) {
if (chart.data.datasets[0].data.every(item => item === 0)) {
let ctx = chart.chart.ctx;
let width = chart.chart.width;
let height = chart.chart.height;
chart.clear();
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('No data to display', width / 2, height / 2);
ctx.restore();
}
}
});
</script>
При этом, если все элементы набора данных равны 0, он будет отображаться No data to display вместо диаграммы.
Комментарии:
1. Это идеальный ответ
2. Мне нравится этот ответ! Вместо обновления всего класса диаграммы вы также можете сделать это непосредственно в новом экземпляре отдельной диаграммы, например
let chart = new Chart(ctx, { plugins: [ { afterDraw: function(chart){...} } ]}3. Не работает в последней версии 3.5.1
Ответ №2:
Вот пример работы с chart.js 2.8.0
<canvas id="pieChartExample01" width="25" height="25"></canvas>
<div id="no-data">Nothing to display</div>
...
options: {
title: {
display: false,
text: 'Overall Activity'
},
animation: {
onComplete: function(animation) {
var firstSet = animation.chart.config.data.datasets[0].data,
dataSum = firstSet.reduce((accumulator, currentValue) => accumulator currentValue);
if (typeof firstSet !== "object" || dataSum === 0) {
document.getElementById('no-data').style.display = 'block';
document.getElementById('pieChartExample01').style.display = 'none'
}
}
}
}
Ответ №3:
Для React (react-chartjs-2)
Используйте этот плагин
const plugins = [
{
afterDraw: function (chart) {
console.log(chart);
if (chart.data.datasets[0].data.length < 1) {
let ctx = chart.ctx;
let width = chart.width;
let height = chart.height;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "30px Arial";
ctx.fillText("No data to display", width / 2, height / 2);
ctx.restore();
}
},
},
];
Используйте этот плагин
<Line height={120} data={props.data} options={options} plugins={plugins} />
<Pie height={320} width={500} data={props.data} options={options} plugins={plugins} />
Ответ №4:
Для тех, кто использует версию библиотеки 3.x, вот как я это сделал
const plugin = {
id: 'emptyChart',
afterDraw(chart, args, options) {
const { datasets } = chart.data;
let hasData = false;
for (let dataset of datasets) {
//set this condition according to your needs
if (dataset.data.length > 0 amp;amp; dataset.data.some(item => item !== 0)) {
hasData = true;
break;
}
}
if (!hasData) {
//type of ctx is CanvasRenderingContext2D
//https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
//modify it to your liking
const { chartArea: { left, top, right, bottom }, ctx } = chart;
const centerX = (left right) / 2;
const centerY = (top bottom) / 2;
chart.clear();
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('No data to display', centerX, centerY);
ctx.restore();
}
}
};
И просто используйте вышеуказанное следующим образом:
const chart1 = new Chart(ctx, {
plugins: [plugin]
});
Ответ №5:
Вам нужно установить некоторые данные в data: [0, 0, 0, 0] Невозможно отобразить круговую диаграмму без каких-либо данных, я пытаюсь изменить только данные, и все это хорошо.
...
data: [2, 3, 4, 5]
...
Комментарии:
1. Вы неправильно истолковали вопрос! Когда нет данных для отображения, я хочу, чтобы отображалось сообщение.