2

我正在尝试为我们公司使用的各种 R/Shiny 仪表板的索引页面编写一些仪表。该页面只是一系列带有一些样式的 div，这些样式导致了这些不同的 R 应用程序。

最近，我们的高管们对在页面顶部看到表示每个部门当月收入和目标的燃油表样式图表表示了极大的兴趣。

我决定使用JustGage插件来制作仪表。我们正在使用我的主管整理的脚本从 csv 中获取数据，以便将该数据转储到服务器上的 JSON 文档中。我们说的是一个 6 行的 JSON 文件。很简单。

我正在使用 AJAX XMLHttpRequest，这似乎奏效了。但是，当我将解析后的数据存储到一个变量中，然后在我的 Gauge 参数中引用它时，我得到：

(index):182 Uncaught ReferenceError: feeData is not defined at (index):182 (anonymous) @ (index):182

在检查窗口中。

该特定行是对包含 JSON 数据的 var 的第一个引用。

任何帮助都会......嗯，有帮助！

< script >
  var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  var feeData = JSON.parse(this.responseText);
  if (this.readyState == 4 && this.status == 200) {
    var feeData = JSON.parse(this.responseText);
  }
};
xhttp.open("GET", "test.json", true);
xhttp.send();
var g = new JustGage({
  titleFontColor: "black",
  labelFontColor: "black",
  id: "DEF",
  value: feeData.DEFCurrent,
  pointer: true,
  min: 0,
  max: feeData.DEFGoal,
  title: "DEF"
});
var g = new JustGage({
  titleFontColor: "black",
  labelFontColor: "black",
  id: "EBO",
  value: feeData.EBOCurrent,
  pointer: true,
  min: 0,
  max: feeData.EBOGoal,
  title: "EBO"
});
var g = new JustGage({
  titleFontColor: "black",
  labelFontColor: "black",
  id: "Company",
  value: (feeData.EBOCurrent + feeData.DEFCurrent),
  pointer: true,
  min: 0,
  max: (feeData.EBOGoal + feeData.DEFGoal),
  title: "Company"
});
var g = new JustGage({
  titleFontColor: "black",
  labelFontColor: "black",
  id: "Legal",
  value: feeData.LegalCurrent,
  pointer: true,
  min: 0,
  max: feeData.LegalGoal,
  title: "Legal"
}); 
</script>

这是 JSON 文件

{"EBOGoal":1000,"EBOCurrent":900,"DEFGoal":2000,"DEFCurrent":1500,"LegalGoal":500,"LegalCurrent":450}

还可能值得一提的是，当我为仪表的 js 代码的 MAX 和 VALUE 参数交换虚拟数值时，仪表本身工作得很好。

4

1 回答 1

2

您有一个变量声明问题，以及一个时间问题。即使您通过将变量移出onreadystatechange函数范围来解决问题，您的代码也会被破坏，因为数据是异步填充的，而其余代码是同步处理的。我建议您将JustGage初始化移动到一个函数中，并在feeData可用时调用该函数：

xhttp.onreadystatechange = function() {
  var feeData = JSON.parse(this.responseText);
  if (this.readyState == 4 && this.status == 200) {
    // call your function with the data
    setupJustGage(JSON.parse(this.responseText));
  }
};

function setupJustGage(feeData) {
    ...
    var g = new JustGage({
      titleFontColor: "black",
      labelFontColor: "black",
      id: "DEF",
      value: feeData.DEFCurrent,
      pointer: true,
      min: 0,
      max: feeData.DEFGoal,
      title: "DEF"
    });
    var g = new JustGage({
      titleFontColor: "black",
      labelFontColor: "black",
      id: "EBO",
      value: feeData.EBOCurrent,
      pointer: true,
      min: 0,
      max: feeData.EBOGoal,
      title: "EBO"
    });
    ...
}

您还可以将您的 XHR 请求包装在一个返回 a 的函数中，Promise并在以下位置运行其余的设置代码then：

function getData() {
    return new Promise(function(resolve) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          var feeData = JSON.parse(this.responseText);
          if (this.readyState == 4 && this.status == 200) {
            resolve(JSON.parse(this.responseText));
          }
        };
        xhttp.open("GET", "test.json", true);
        xhttp.send();
    })
}

getData().then(function(feeData) {
   var g = ...
})
于 2017-08-28T20:30:29.097 回答