javascript - 在我点击标签 3 次之前，Chart.js 不显示数据

Question

我在网站中添加图表时遇到了 chart.js 的奇怪问题。我正在从从 json 文件加载页面时创建的 2 个数组加载数据。

问题是，直到我点击图表标签 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
               }
            }]
         }
      }
   });
});
...

希望这能解决您的问题。