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

【问题标题】：Unable to get data from API to show data in chart无法从 API 获取数据以在图表中显示数据
【发布时间】：2017-02-22 13:22:10
【问题描述】：

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

样本数据：

172.70

API：

https://api.thingspeak.com/channels/23037xxx/fields/field1/last?api_key=EG628M4J9SP76xxx

<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>

【问题讨论】：

您能否更具体地了解“此代码不起作用”？你得到什么错误？请编辑您的问题并添加更多信息。
我没有从控制台收到任何错误。它没有显示任何图表。
请在 jsfiddle.net 中重新创建您的代码并在此处发布链接。
您只是将代码复制粘贴到 jsfiddle 中，并没有创建可运行的演示。请在将来发布您的问题时创建一个完整的演示。

标签： javascript fusioncharts

【解决方案1】：

你不需要检查data.success。您的 api 仅以浮点值响应。所以data.success 是未定义的。它从不进入 if 条件。

查看演示：http://jsfiddle.net/x5FBh/1201/

JS：

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();
      //}
    }
  });
}

【讨论】：

你能告诉我如何每 30 秒刷新一次图表
不客气。你只需要在 javascript 中使用setInterval() 方法并每隔n 秒调用一次LoadChart() 方法。请看这里，stackoverflow.com/questions/21638574/… 就像，setInterval(function(){ LoadChart()}, 30000) 不要忘记检查我的答案左侧的勾号以接受它。