Question

我希望可视化来自家庭自动化中间件（ioBroker）的数据。数据可以通过URL加载为json字符串。

当我将数据直接复制到脚本中时，它可以工作，但我想动态加载数据。加载本身是有效的（在控制台中获取json字符串）但是如何将变量“out”的内容放入myChartConfig声明中？尝试了很多东西，但没有奏效。

json - 由url提供的文字：

{labels : ['2017-10','2017-9','2017-8','2017-7','2017-6','2017-5','2017-4','2017-3','2017-2','2017-1','2016-12','2016-11'], datasets : [{label: 'PV Eigenverbr.', data: [235,341,0,0,0,0,0,0,0,0,0,0], backgroundColor:['LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ']},{label: 'PV Produktion', data: [473,775,96,0,0,0,0,0,0,0,0,0], backgroundColor:['LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue']},{label: 'PV Einspeisung', data: [238,433,0,0,0,0,0,0,0,0,0,0], backgroundColor:['LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen']},{label: 'Bezug aus Netz', data: [572,575,0,0,0,0,0,0,0,0,0,0], backgroundColor:['red','red','red','red','red','red','red','red','red','red','red','red']}]}

剧本：

<script>

   url='http://192.168.0.201:8087/getPlainValue/javascript.1.Statistiken.12_Monate.stromAuswertungGesamt';
    var out;
    fetch(url)
    .then(res => res.json())
    .then((out) => {
        console.log('Checkout this JSON! ', out);
        // output of console is exactly the json string
    })
    .catch(err => { throw err });

    var myContext = document.getElementById("myChart");
    var myChartConfig = {
      type: 'bar',
      /this is schould be replaced by "out" 
      data: {labels : ['2017-10','2017-9','2017-8','2017-7','2017-6','2017-5','2017-4','2017-3','2017-2','2017-1','2016-12','2016-11'], datasets : [{label: 'PV Eigenverbr.', data: [235,341,0,0,0,0,0,0,0,0,0,0], backgroundColor:['LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ','LightSeaGreen ']},{label: 'PV Produktion', data: [473,775,96,0,0,0,0,0,0,0,0,0], backgroundColor:['LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue','LightSkyBlue']},{label: 'PV Einspeisung', data: [238,433,0,0,0,0,0,0,0,0,0,0], backgroundColor:['LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen','LightGreen']},{label: 'Bezug aus Netz', data: [572,575,0,0,0,0,0,0,0,0,0,0], backgroundColor:['red','red','red','red','red','red','red','red','red','red','red','red']}]}
    }
  var myChart = new Chart(myContext, myChartConfig);
</script>

任何提示？

Answer 1

你不能这样做。 fetch（url）返回一个promise，意味着在使用返回值之前函数不一定完成。你必须将其余的代码放在第二个代码中。您可以很容易地看到，如果您在then-catch链下使用console.log（out），它将在console.log之前打印该值（'Checkout this JSON！'，out），它将注销{{1 }}

Answer 2

好的，让我们试试这个：我用其他promises替换了fetch promise和json promise，只是为了让你看到语法。假设有效载荷是从fetch返回的内容 -

const payload = {value: "someValue"};

Promise.resolve({
    json: () => Promise.resolve(payload)
})
.then(res => res.json())
.then((out) => {
    var myContext = document.getElementById("myChart");
var myChartConfig = {
  type: 'bar',
  //this is schould be replaced by "out" 
  data: payload
}
var myChart = new Chart(myContext, myChartConfig);
})
.catch(err => { throw err });

正如您所看到的，我将函数的其余部分重新定位到第二个then，其中out具有已解析的承诺的值。

您可以看到工作示例here。

希望这有帮助。

导入Json格式的值以使用Chart.js创建条形图

2 个答案: