如何从服务器/ url 中提取 json 数据并设置为等于变量？

问题描述

我目前有一个来自 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，但不适用于我使用它的代码，但除了我的页面/代码上有更多图表之外，它完全相同） 关于为什么会这样的任何想法？

解决方法

查看演示如何获取 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
      }]
    });
  });