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>

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

1 个答案: