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

Question

我想可视化来 self 的家庭自动化中间件 (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) 之前的值，并且会注销 未定义。