Pie chart.js - отображать сообщение без данных - PullRequest
Новая
       18

Pie chart.js - отображать сообщение без данных

6 голосов
/ 08 апреля 2019

Я использую chart.js Версия: 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/chart.js@2.8.0"></script>

Это то, что я бы хотел, чтобы пустая круговая диаграмма отображалась как (желательно с метками):

enter image description here

ОБНОВЛЕНИЕ ОТВЕТА - 13 апреля 2019 г.

Используя ответ, предоставленный Core972, я решил экстраполировать принятый ответ, чтобы выбранное сообщение могло отображаться на гистограмме.и круговая диаграмма с отображаемыми метками данных, а не просто пустой холст.

Вот решение, которое я придумал, которое работает с круговой и гистограммой.

Я не тестировалдругие типы диаграмм, но я предполагаю, что они будут работать с тем же подходом.

Несколько указаний на заметку:

  1. Когда нет данных для отображения,границы также должны быть равны нулю, в противном случае раздражающая граница отображается в виде одной строки.Используйте простое условие if else, чтобы скрыть, если необходимо, показывайте границы.

  2. Используйте условие if else, чтобы отобразить / скрыть сообщение.Если есть данные, скройте сообщение, иначе отобразите сообщение, если данные равны нулю.

  3. Я тестировал этот подход только с 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>

Ответы [ 2 ]

2 голосов
/ 08 апреля 2019

Вот пример работы с 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'
      }
    }
  }
}

Fiddle

0 голосов
/ 08 апреля 2019

Вам необходимо установить некоторые данные в данных: [0, 0, 0, 0] Невозможно отобразить круговую диаграмму без каких-либо данных, я пытаюсь изменить только данные, и все это хорошо. 

...
data: [2, 3, 4, 5]
...

https://jsfiddle.net/myeLq37j/

...