Javascript 无法从API获取数据以在图表中显示数据_Javascript_Fusioncharts

Javascript 无法从API获取数据以在图表中显示数据

javascript

Javascript 无法从API获取数据以在图表中显示数据,javascript,fusioncharts,Javascript,Fusioncharts,我正在使用ThingSpeak API检索数据。我想在融合图中显示数据。如何在图表中显示动态数据？此代码适用于其他第三方API，但不适用于此API 样本数据： 172.70 API: FusionCharts.ready（函数（）{ 负荷图（）； }); 函数负载图（）{ $.ajax({ 网址：'https://api.thingspeak.com/channels/230xxx/fields/field1/last?api_key=EG628M4J9SP76xxx“，//本地地址键入

我正在使用ThingSpeak API检索数据。我想在融合图中显示数据。如何在图表中显示动态数据？此代码适用于其他第三方API，但不适用于此API

样本数据：

172.70

API:


FusionCharts.ready（函数（）{
负荷图（）；
});
函数负载图（）{
$.ajax({
网址：'https://api.thingspeak.com/channels/230xxx/fields/field1/last?api_key=EG628M4J9SP76xxx“，//本地地址
键入：“GET”，
跨域：是的，
成功：功能（数据）{
if（data.success）{
var=数据；
var phfusioncharts=新的FusionCharts({
类型：“角度规”，
renderAt:“ph容器”，
宽度：'450'，
高度：'300'，
dataFormat:'json'，
数据源：{
“图表”：{
“说明”：“氯”，
“lowerLimit”：“0”，
“上限”：“14”，
“showValue”：“1”，
“valueBelowPivot”：“1”，
“主题”：“fint”
},
“颜色范围”：{
“颜色”：[{
“最小值”：“0”，
“最大值”：“5”，
“代码”：“6baa01”
}, {
“最小值”：“5”，
“最大值”：“10”，
“代码”：“#f8bd19”
}, {
“最小值”：“10”，
“最大值”：“14”，
“代码”：“e44a00”
}]
},
“刻度盘”：{
“拨号”：[{
“价值”：氯
}]
}
}
});
phfusioncharts.render（）；
}
}
});
}

您不需要检查

数据是否成功。您的api只响应一个浮点值。因此，data.success
未定义。它从不进入if状态
查看演示：
JS:
你能更具体地说“这个代码不起作用”吗？你有什么错误？请编辑您的问题并添加更多信息。我没有从控制台收到任何错误。它没有显示任何图表。请在jsfiddle.net中重新创建您的代码，并在此处发布链接。您只是在jsfiddle中复制粘贴了代码，而没有创建可运行的演示。请在以后发布问题时创建一个完整的演示。你能告诉我如何每30秒刷新一次图表吗？欢迎。您只需在javascript中使用setInterval（）
方法，并每隔n
秒调用LoadChart（）
方法。请看这里，它是这样的，setInterval（function（）{LoadChart（）}，30000）别忘了检查我答案左边的勾号以接受它。
<script>
  FusionCharts.ready(function() {
    LoadChart();
  });

  function LoadChart() {
    $.ajax({
      url: 'https://api.thingspeak.com/channels/230xxx/fields/field1/last?api_key=EG628M4J9SP76xxx', // local address
      type: 'GET',
      crossDomain: true,
      success: function(data) {
        if (data.success) {
          var chlorine = data;
          var phfusioncharts = new FusionCharts({
            type: 'angulargauge',
            renderAt: 'ph-container',
            width: '450',
            height: '300',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "Chlorine ",
                "lowerLimit": "0",
                "upperLimit": "14",
                "showValue": "1",
                "valueBelowPivot": "1",
                "theme": "fint"
              },
              "colorRange": {
                "color": [{
                  "minValue": "0",
                  "maxValue": "5",
                  "code": "#6baa01"
                }, {
                  "minValue": "5",
                  "maxValue": "10",
                  "code": "#f8bd19"
                }, {
                  "minValue": "10",
                  "maxValue": "14",
                  "code": "#e44a00"
                }]
              },
              "dials": {
                "dial": [{
                  "value": chlorine
                }]
              }
            }
          });

          phfusioncharts.render();
        }
      }
    });
  }
</script>
</head>
<body>
  <table class="">
    <tr>
      <td>
        <div id="ph-container" style="float:left;"></div>
      </td>
    </tr>
  </table>

FusionCharts.ready(function () {
  LoadChart();
});

function LoadChart() {
  $.ajax({
    url: 'https://api.thingspeak.com/channels/230372/fields/field1/last?api_key=EG628M4J9SP769UT', // local address
    type: 'GET',
    crossDomain: true,
    success: function (data) {
        console.log('xhr success')
      //if (data.success) {
        console.log("success");
        var chlorine = data;
        var phfusioncharts = new FusionCharts({
          type: 'angulargauge',
          renderAt: 'ph-container',
          width: '450',
          height: '300',
          dataFormat: 'json',
          dataSource: {
            "chart": {
              "caption": "Chlorine ",
              "lowerLimit": "0",
              "upperLimit": "14",
              "showValue": "1",
              "valueBelowPivot": "1",
              "theme": "fint"
            },
            "colorRange": {
              "color": [{
                "minValue": "0",
                "maxValue": "5",
                "code": "#6baa01"
              }, {
                "minValue": "5",
                "maxValue": "10",
                "code": "#f8bd19"
              }, {
                "minValue": "10",
                "maxValue": "14",
                "code": "#e44a00"
              }]
            },
            "dials": {
              "dial": [{
                "value": "22"
              }]
            }
          }
        });

        phfusioncharts.render();
      //}
    }
  });
}