導入Json格式的值以使用Chart.js創建條形圖

Question

我想可視化來自家庭自動化中間件（ioBroker）的數據。 可以通過URL將數據作為json字符串加載。

當我直接將數據復制到腳本中時，它可以工作，但是我想動態地加載數據。 加載本身可以工作（在控制台中獲取json字符串），但是如何將變量“ out”的內容放入myChartConfig聲明中？ 嘗試了很多事情，但是沒有用。

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>

任何提示？

Answer 1

你不能這樣子。 fetch（url）返回一個promise，這意味着在使用返回值之前函數不一定完成。 然后，您必須將其余代碼放入第二個代碼中。 您可以輕松地看到，如果在then-catch鏈下使用console.log（out），它將在console.log（'Checkout this JSON！'，out）之前打印值，並且將注銷undefined 。

Answer 2

好的，讓我們嘗試一下：我用其他promise替換了fetch promise和json promise，僅供您查看語法。 假設有效載荷是從獲取中返回的內容-

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有解決的承諾的價值。

您可以在此處查看工作示例。

希望這可以幫助。