Javascript Chart.js在单击标签3次后才显示数据

我在一个网站上添加了一个图表，我在chart.js上遇到了一个奇怪的问题。我从两个数组加载数据，这两个数组是从json文件加载页面时创建的

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

我假设我的问题是在图表出现之前加载数据，所以，我的想法是将所有内容封装在一个函数中，并在单击显示图表的按钮时调用它，但它一直在做同样的事情。你将如何修复它

以下是我的html相关代码：

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

以及我的数据json文件的摘录：

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

还有一个。 谢谢

由于方法是异步的，您应该在它的回调函数中构造图表，如下所示：

...
$.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
               }
            }]
         }
      }
   });
});
...

希望这能解决您的问题。

因为方法是异步的，所以您应该在它的回调函数中构造图表，如下所示：

...
$.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
               }
            }]
         }
      }
   });
});
...

---

希望这能解决您的问题。

正如我之前作为评论发布的那样，尝试这样做：

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

---

正如我之前作为评论发布的那样，尝试这样做：

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

---

当您从getJSON获得响应时，尝试创建图表

新图表
。尝试在
getJSON
的done（）回调上封装整个过程，如下所示：
$.getJSON（…）.done（var dataVar…）
（我现在无法为您测试，请让我知道结果）它工作了，感谢两位年轻人在获得getJSON响应后创建图表
新图表
。尝试在
getJSON
的done（）回调上封装整个过程，如下所示：
$.getJSON（…）.done（var dataVar…）
（我现在无法为您测试，请让我知道结果）它成功了，谢谢你们两位。也许为了让它更容易理解，最好按照答案注释中的建议将其置于a.done函数下，但这正如预期的那样有效。嗯。。是的，你可以把它放在
done
下，甚至
then
下。。基本上都是一样的：）我知道，但由于这是一个大型web应用程序，也许我（或其他人）将来会做维护工作，我正试图让它对每一个工作的应用程序都更容易理解。也许为了让它更容易理解，最好按照答案注释中的建议将其置于a.done函数下，但这正如预期的那样有效。嗯。。是的，你可以把它放在
done
下，甚至
then
下。。基本上都是一样的：）我知道，但由于这是一个大型web应用程序，也许我（或其他人）将来会做维护工作，我正试图让每个人都更容易理解