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

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

当我将数据直接复制到脚本中时，它可以工作，但我希望动态加载数据。 加载本身可以工作（在控制台中获取json字符串），但是如何将变量“out”的内容获取到myChartConfig声明中呢？？ 我尝试过很多事情，但都没有成功

url提供的Json文本：

{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>

url='1〕http://192.168.0.201:8087/getPlainValue/javascript.1.Statistiken.12_Monate.stromAuswertungGesamt';
var-out；
获取（url）
.then（res=>res.json（））
.然后（（输出）=>{
log（'Checkout this JSON！'，out）；
//控制台的输出正好是json字符串
})
.catch（err=>{throw err}）；
var myContext=document.getElementById（“myChart”）；
var myChartConfig={
类型：'bar'，
/这将被替换为“out”
数据：{标签：['2017-10'、'2017-9'、'2017-8'、'2017-7'、'2017-6'、'2017-5'、'2017-4'、'2017-3'、'2017-2'、'2017-1'、'2016-12'、'2016-11']，数据集：[{标签：'PV特征值'，数据：[235341,0,0,0,0,0,0,0]，背景色：['LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，'LightSeaGreen'，标签：'PV生产'，数据：[473775,96,0,0,0,0,0,0,0,0]，背景色：['LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue'、'LightSkyBlue']]，{标签：'PV Einspeissung'，数据：[238433,0,0,0,0,0,0,0,0]，背景色：[LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen'、'LightGreen']，{标签：'Bezug aus Netz'，数据：[572575,0,0,0,0,0,0,0,0,0]，背景色：['red'、'red'、'red'、'red'、'red'、'red'、'red']
}
var myChart=新图表（myContext，myChartConfig）；

有什么提示吗？？？

你不能这样做。 fetch（url）返回一个承诺，这意味着函数不一定在使用返回值之前完成。 你必须把剩下的代码放在第二个里面。 您可以很容易地看到，如果在then catch链下使用console.log（out），它将在console.log之前打印值（“签出此JSON！”，out），并且它将注销未定义的

您不能这样做。
fetch（url）返回一个承诺，这意味着函数不一定在使用返回值之前完成。
你必须把剩下的代码放在第二个里面。
您可以很容易地看到，如果在then catch链下使用console.log（out），它将在console.log之前打印值（“签出此JSON！”，out），并且它将注销未定义的
我用其他承诺替换了fetch承诺和json承诺，只是为了让您看看语法-

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 });

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

您可以看到工作示例

希望这有帮助。
好的，让我们试试这个：
我用其他承诺替换了fetch承诺和json承诺，只是为了让您看看语法-

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 });

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

您可以看到工作示例

希望这能有所帮助。
嗯，这和我昨天尝试的差不多-但没有条形图-控制台中也没有错误。您好，首先，感谢您的支持。这就是我昨天尝试的。如果我理解正确，如果我替换“someValue”，它将必须工作在您的示例中使用我的Json字符串-对吗？不幸的是，不会显示任何图形-但控制台中也不会出现错误。我对javascript几乎一无所知，似乎有点不知所措。如果没有错误，这是一件好事。如果没有显示数据，可能它的格式不正确。首先尝试找到正确的数据类型图表构造器期望的，然后给它实际的数据。嗯，这和我昨天尝试的差不多-但没有条形图-控制台中也没有错误。您好，首先，感谢您的支持。这是我昨天尝试的。如果我理解正确，如果我替换“someValue”，它将必须工作在您的示例中使用我的Json字符串-对吗？不幸的是，不会显示任何图形-但控制台中也不会出现错误。我对javascript几乎一无所知，似乎有点不知所措。如果没有错误，这是一件好事。如果没有显示数据，可能它的格式不正确。首先尝试找到正确的数据类型t图表构造函数所期望的，然后给它实际的数据。