Круговая диаграмма.js — отображать сообщение об отсутствии данных
Я использую диаграмма.js Version: 2.8.0 для отображения гистограмма и круговая диаграмма.
Непустые гистограммы и круговые диаграммы отображаются так, как я хочу.
Однако, когда гистограммы и круговые диаграммы пусты или содержат нулевые данные для отображения, есть ли стандартизированная опция для отображения "Нет данных для отображения!" сообщение для гистограммы и круговой диаграммы может отображаться вместо пустых или нулевых данных.
Я искал в Google плагин и SO для решения, но варианты, которые я нашел, либо вообще не работают, либо не работают для последней версии 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/[email protected]"></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/[email protected]"></script>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вам нужно установить некоторые данные в data: [0, 0, 0, 0] Невозможно отобразить круговую диаграмму без каких-либо данных, я пытаюсь изменить только данные, и все хорошо.
...
data: [2, 3, 4, 5]
...
https://jsfiddle.net/myeLq37j/
Вот пример работы с 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'
}
}
}
}
Используйте этот плагин, который я немного изменил, который проверяет, равен ли каждый элемент набора данных нулю:
<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.
Это идеальный ответ
Люблю этот ответ! Вместо обновления всего класса Chart вы также можете сделать это непосредственно в новом отдельном экземпляре диаграммы, например let chart = new Chart(ctx, { plugins: [ { afterDraw: function(chart){...} } ]}
Не работает в последней версии 3.5.1
Спасибо stardust4891 и @Tanckom Это сработало как шарм.
Для React (реагировать-chartjs-2)
Используйте этот плагин
const plugins = [
{
afterDraw: function (chart) {
console.info(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} />
Вы неправильно прочитали вопрос! Когда нет данных для отображения, я хочу, чтобы отображалось сообщение.