Подсказка chart.js постоянно запоминает старые данные после обновления - PullRequest
Новая
       45

Подсказка chart.js постоянно запоминает старые данные после обновления

0 голосов
/ 18 ноября 2018

Я показываю график с chart.js, и когда пользователь наводит на него курсор, появляется всплывающая подсказка. Это отлично работает.

Однако я хочу добавить опцию, чтобы пользователи могли отменить проверку точек данных. Я сделал, и это сделано правильно, но функция всплывающей подсказки запоминает как новые, так и старые данные. Поэтому, если вы наводите курсор на график, он мигает между старым и новым.

Когда я делаю пользовательскую подсказку и помещаю в файл console.log объекта data-oject, я вижу, что он просто загружает несколько объектов данных.

Есть ли способ убедиться, что старые данные действительно забыты?

См. Скрипку https://jsfiddle.net/CorneelDragon/s0udzwv3/27/ или код ниже (работает с самого начала, но когда вы убираете галочку, всплывающая подсказка приводит к ошибкам): 

<script 
src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>`
<div id="slct2">"beh"</div>
<table id="table1"  border=1></table>
<!-- bar chart canvas element -->
<canvas id="myChart" width="200" height="50"></canvas>
<script type="text/javascript">
</script>

и JavaScript: 

test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
    if (test_labels.hasOwnProperty(test)) {
        var pair = test_labels[test] + score[test];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = "test_filter";
        checkbox.value = pair;
        checkbox.checked = true;
        s2.appendChild(checkbox);
        var label = document.createElement('label');
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));
        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}

function fillCanvas (test_labels, score) {
  var ctx = document.getElementById("myChart").getContext('2d');
  ctx.innerHTML = "";

  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels : ["test_month"]
      },
  });

  setTimeout(function () {

     for (test in test_labels){
        myChart.data.datasets.push({
          backgroundColor: 'rgb(228,26,28)',
          label: test_labels[test],
          data: [score[test]]
        });
      }

    myChart.update();

  }, 1000);

}
fillCanvas(test_labels, score);

var filter_magic = function(e) {

        test_selected = []
        var table1 = document.getElementById("table1");
        table1.innerHTML = "";
        jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
              var tr = document.createElement('tr');
              tr.innerHTML = this.value;
              table1.appendChild(tr);
              test_selected.push(this.value);
            }
          })
        fillCanvas(test_selected, score);
        }     
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();

1 Ответ

0 голосов
/ 19 ноября 2018

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

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

См. Приведенный ниже код или скрипку -> https://jsfiddle.net/s0udzwv3/31/

test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
    if (test_labels.hasOwnProperty(test)) {
        var pair = test_labels[test] + score[test];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = "test_filter";
        checkbox.value = pair;
        checkbox.checked = true;
        s2.appendChild(checkbox);
        var label = document.createElement('label');
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));
        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}
var myChart;

function fillCanvas (test_labels, score) {  
  var ctx = document.getElementById("myChart").getContext('2d');
  ctx.innerHTML = "";

  if(myChart)
  {
    myChart.destroy();
  }

  myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels : ["test_month"]
      },
  });

  setTimeout(function () {
     for (test in test_labels){
        myChart.data.datasets.push({
          backgroundColor: 'rgb(228,26,28)',
          label: test_labels[test],
          data: [score[test]]
        });
      }

    myChart.update();

  }, 1000);
}

fillCanvas(test_labels, score);

var filter_magic = function(e) {

        test_selected = []
        var table1 = document.getElementById("table1");
        table1.innerHTML = "";
        jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
              var tr = document.createElement('tr');
              tr.innerHTML = this.value;
              table1.appendChild(tr);
              test_selected.push(this.value);
            }
          })
        fillCanvas(test_selected, score);
        }     
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();

И другой рекомендуемый способ - загружать диаграмму только один раз с new Chart, и каждый раз для переключения флажка просто выдвигать новые наборы данных и вызывать метод chart.update (), хранящийся в глобальной переменной.

...