Chart.js 从保存的 JSON 对象加载新数据

Question

因此，解释这个问题的最简单方法是查看我创建的示例 http://jsfiddle.net/andywebo/d6fskqpx/18/

所以我想要实现的是，每次从下拉列表中选择一个新的日期期间，图表都会使用新的数据集和标签进行更新（此处为 JSON 数据：http://myjson.com/1d6l2o）。

<select name="search_period" id="search_period" data-src="https://api.myjson.com/bins/1d6l2o">
   <option value="day">Day</option>
   <option value="week">Week</option>
   <option value="month" selected>Month</option>
   <option value="year">Year</option>                     
</select>

它第一次工作，但如果您选择最初选择的“月”时间段，我尝试保存的 jsonData（我设置为选定的任何日期时间段都会发生同样的情况）

var chart; 
var ctx = document.getElementById("searchChart").getContext("2d");   

var initPeriod = $('#search_period').val();
var jsonURL = $('#search_period').data('src'); 
var jsonData; 

$.getJSON( jsonURL, function( results ) {
   chart = new Chart(ctx, {
    data: results[initPeriod],
    ...
   });
   jsonData = results;
});

$('#search_period').change(function(){
  var activePeriod = $(this).val();

  removeAllData(chart);      

  addNewData(chart, jsonData[activePeriod]);

});

...似乎被 removeAllData 函数修改了 - 我可以在控制台中看到“月份”数据被删除

function removeAllData(chart) {     
  chart.data.labels.length = 0;
  chart.data.datasets.length = 0;
}

我发现的唯一方法是在每次选择新时间段时重新获取数据，但这并不理想！

额外问题：任何想法为什么图表不会在每次选择先前选择的日期期间时都动画？

Answer 1

销毁和渲染新图表要容易得多。 chart.update 方法更适合管理小块数据，例如添加或删除一些点。

您只需调用chart.destroy 并再次运行您的图表创建功能。

$(function(){  

  var chart; 
  var ctx = document.getElementById("searchChart").getContext("2d");
  var initPeriod = $('#search_period').val();
  var jsonURL = $('#search_period').data('src'); 
  var jsonData;

  var initChart = function (data) {
    chart = new Chart(ctx, {       
      type: 'line',        
      data: data,       
      options: {
        responsive: true,
        legend: {
          display: false
        },
        elements:{
          point:{
            radius:0
          }
        },
        scales:{
          xAxes:[
            {
              gridLines:{
                display:false
              }
            }
          ],
          yAxes:[
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });  
  };
  
  // fetch data
  $.getJSON( jsonURL, function( results ) {
    // copy json object
    jsonData = results;     
    // init chart
    initChart(results[initPeriod])
  });

  // on new period select
  $('#search_period').change(function(){
    // get new period
    var activePeriod = $(this).val();
    // render chart again
    initChart(jsonData[activePeriod]);
  });


});

.panel-searches__graph{
  margin:20px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<select name="search_period" id="search_period" data-src="https://api.myjson.com/bins/1d6l2o">
  <option value="day">Day</option>
  <option value="week">Week</option>
  <option value="month" selected>Month</option>
  <option value="year">Year</option>                     
 </select>

<div class="panel-searches__graph">
  <canvas id="searchChart" width="500" height="150"></canvas>
</div>