如何從服務器/ url 中提取 json 數據並設置為等於變量？

Question

我目前有一個來自 highcharts 的儀表圖，使用我直接輸入的數據，但現在我試圖過渡到從通過json-server --watch livePSAD.json --port 8000托管的服務器中提取數據（json fromat）這是我目前擁有的圖表https://jsfiddle.net/IzzyStrauch/9zuewk18/18/

series: [
      {
        name: "Speed",
        data: [85],
        tooltip: {
          valueSuffix: " RPM"
        }
      }
    ],

我目前正試圖找出一種方法來設置系列的數據部分等於 http://localhost:8000/f0s 看起來像這樣

[
  55
]

並每 3 秒實時更新一次，我知道我可以通過 enablePolling: true 進行更新，但我無法讓它從 url 中提取靜態數字 55。

if (!chart.renderer.forExport) {
      setInterval(function () {
        var lg = 50;
        var hg = 120;
        var point = chart.series[0].points[0],
          axis = chart.yAxis[0];

        axis.update({
          plotBands: [
            {
              from: 0,
              to: lg,
              color: "red" // green
            },
            {
              from: lg,
              to: hg,
              color: "green" // yellow
            },
            {
              from: hg,
              to: 200,
              color: "red" // red
            }
          ]
        });
      }, 3000);
    }
  }

然后我想將變量 lg 設置為 http://localhost:8000/f0lg 並將 hg 設置為 http://localhost:8000/f0hg
lg看起來像這樣

[
  30
]

hg 看起來像這樣

[
  70
]

我想讓那些也每 3 秒從那個 url 中拉取一次

關於這怎么可能的任何想法？

使用已檢查的解決方案，我現在可以輸入和更改圖表的所有變量，但刻度線都不穩定，這是新代碼https://jsfiddle.net/IzzyStrauch/1rx3tyjp/9/

（出於某種原因，它適用於 jsfidle，但不適用於我使用它的代碼，但除了我的頁面/代碼上有更多圖表之外，它完全相同）關於為什么會這樣的任何想法？

Answer 1

檢查顯示如何獲取 JSON 數據並初始化圖表的演示： https : //jsfiddle.net/BlackLabel/rdn4fyb7/

fetch("https://api.npoint.io/6f74f002ed847e39cc3c")
  .then(response => response.json())
  .then(data => {
    //check how the fetched data looks like
    console.log(data)

    //create chart
    Highcharts.chart('container', {

      series: [{
                type: 'column',
        data: data.data
      }]
    });
  });