Question

我在网站上添加了一个图表，而且我对chart.js有一个奇怪的问题。我从2个从json文件加载页面时创建的数组加载数据。

问题是，在我点击图表标签2次之前，它没有显示的数据。在加载时，没有信息，第一次单击x标签显示，在第二次单击时，x标签和数据都显示出来。之后，单击数据集的标签将按预期工作。

我认为我的问题是我在图表存在之前加载数据，因此，我的想法是将所有内容封装在一个函数中，并在单击显示图表的按钮时调用它，但它仍在继续同一件事情。你会如何解决它？

这是我的html相关代码：

<div class="popup">
    <span class="popuptrend" id="myPopup"><canvas id="myChart" width="auto" height="400"></canvas></span>
</div>

我的JS代码：

$(function(){
    $("#showTrend").click(function(){
        createChart();
        var popup = document.getElementById("myPopup");
        popup.classList.toggle("show");
    });
});
function createChart(){
    var labels = [];
    var dataValue = [];

    $.getJSON("./resources/chart.json", function(jsonData) {
        var index = 0;
        for (var key in jsonData) {
                if(index == 0){ // SKIP FISRT ITEM
                    index++;
                }else{
                    labels.push(key);
                    dataValue.push(parseFloat(jsonData[key]));
                }
        }
    });
    var dataVar = {
        labels: labels,
        datasets:
        [{
            label: "Value",
            backgoundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255, 0, 0, 0.8)',
            borderWith: 1,
            data: dataValue
        }]
    };
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: dataVar,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
}

来自我的数据json文件的摘录：

{
    "15/04/2017":"67.34375",
    "16/04/2017":"67.3203125",
}

和gif of the behaviour。谢谢！

Answer 1

由于$.getJSON()方法是异步的，你应该在其中构建你的图表的回调函数，如下所示：

...
$.getJSON("./resources/chart.json", function(jsonData) {
   var index = 0;
   for (var key in jsonData) {
      if (index == 0) { // SKIP FISRT ITEM
         index++;
      } else {
         labels.push(key);
         dataValue.push(parseFloat(jsonData[key]));
      }
   }

   var dataVar = {
      labels: labels,
      datasets: [{
         label: "Value",
         backgoundColor: 'rgba(255, 0, 0, 0.2)',
         borderColor: 'rgba(255, 0, 0, 0.8)',
         borderWith: 1,
         data: dataValue
      }]
   };

   var ctx = document.getElementById("myChart");
   var myChart = new Chart(ctx, {
      type: 'line',
      data: dataVar,
      options: {
         scales: {
            yAxes: [{
               ticks: {
                  beginAtZero: true
               }
            }]
         }
      }
   });
});
...

希望这能解决您的问题。

Answer 2

正如我之前发表的评论，请尝试这样做：

$.getJSON(...).done(var dataVar....)

Chart.js直到我点击标签3次才显示数据

2 个答案: