jqplot переключает сообщение noData - PullRequest
Новая
       10

jqplot переключает сообщение noData

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

Я пытаюсь создать круговую диаграмму, используя jqplot .
Данные для диаграммы обновляются динамически по запросу пользователя.Когда пользователь выбирает набор данных, страница переходит на сервер и извлекает данные.

В некоторых случаях могут отсутствовать данные для запрошенного выбора.В этом случае я хочу показать сообщение о том, что нет данных.Я попытался использовать «noDataIndicator» для этого, но столкнулся с проблемой, когда «noDataIndicator» рисуется postDrawHook.Кроме того, глядя на исходный код, он добавляется / удаляется только при инициализации графика.

Проблема, с которой я столкнулся, заключается в следующем - либо вообще рисуется div "noDataIndicator", в этом случае,даже когда у меня есть данные, поверх них рисуется пустой элемент div;или он никогда не рисуется, даже когда я переключаюсь на пустой набор данных и устанавливаю noDataIndicator["show"] = true

Вот пример кода того, что я делаю.Смотрите скрипку ниже.Чтобы запустить его самостоятельно, требуется:

  • jquery
  • jqplot
  • jqplot.pieRenderer

HTML 

<div id="myChart" class="jqplot-target"></div>

<ul>
  <li id="updateGraph"><a href="#changeDataSet">change DataSet</a></li>
  <li id="redrawGraph"><a href="#replotGraph">redraw Graph</a></li>
</ul>

Javascript 

// declare variable outside document.ready
var plot1;
var storedData; 
var drawWithNoDataIndicator = true;
var updateId = 0;
var updates = [
  [ ['Take home pay', 44228.33], ['Tax', 8771.67], ['Super', 4162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33], ['Testing', 8000] ],
    [ ['Take home pay', 14228.33], ['Tax', 18771.67], ['Super', 14162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33], ['Testing', 8000] ],
  [],
];

function getNextUpdate() {
    var data = updates[updateId];
  updateId++;
  if(updateId >= updates.length)
    updateId = 0;
  return data;
}

$(document).ready(function () {
    //jQuery.jqplot.config.enablePlugins = false;
    plot1 = $.jqplot('myChart', [''], {
      seriesDefaults: {
        renderer: $.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true,
        }
      },
      noDataIndicator: {
        show: drawWithNoDataIndicator,
        indicator: 'Loading Data...',
      },
      legend: { show: true, location: 'e' }
  });

    $('#updateGraph').click(function(){updateGraph();});
    $('#redrawGraph').click(function(){redrawGraph();});
});

function updateGraph() {
    plot1.destroy();
    plot1.series[0].data = getNextUpdate();
    if(plot1.series[0].data.length === 0) {
      plot1.noDataIndicator = { show: true, indicator: 'No data in the selected set.' };
    } else {
     plot1.noDataIndicator = { show: false };
    }
    plot1.replot(true);
}
function redrawGraph() {
    plot1.destroy();
  $('#myChart').empty();
  plot1 = $.jqplot('myChart', drawWithNoDataIndicator ? [''] : updates[updateId], {
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer,
      rendererOptions: {
        showDataLabels: true,
      }
    },
    noDataIndicator: {
      show: drawWithNoDataIndicator,
      indicator: 'Loading Data...',
    },
    legend: { show: true, location: 'e' }
  });
  drawWithNoDataIndicator = !drawWithNoDataIndicator;

}

Рабочая (немного глючная) скрипка .Нажатие «изменить набор данных» изменит данные.Нажатие «Перерисовать график» будет перерисовывать его с или без noDataIndicator с перерывами.

Вы можете видеть, что при рисовании с помощью индикатора текст будет отображаться, когда данных нет, но когда данные есть, график покрываетсячем-то немного непрозрачным, которое блокирует события мыши.

Есть ли какое-либо решение для правильного удаления «noDataIndicator», кроме фактического полного удаления графика и его перерисовки, как я делаю со второй кнопкой?

...