微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何从服务器/ 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
      }]
    });
  });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。