Question

我正在使用ThingSpeak API检索数据。我想在融合图表中显示数据。如何在图表中显示动态数据？此代码适用于其他第三方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>

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

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

1 个答案: