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>