API에서 데이터를 가져 와서 차트

에 데이터를 표시 할 수 없습니다. 물건 피크 API를 사용하여 데이터를 검색합니다. 융합 차트에 데이터를 표시하고 싶습니다. 차트에 동적 데이터를 표시하는 방법은 무엇입니까? 이 코드는 다른 써드 파티 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>

출처

2017-02-22 Swapna

는 "_this 코드가 working_되지"에 대한보다 구체적인 수 있을까? 어떤 오류가 발생합니까? 질문을 수정하고 추가 정보를 입력하십시오. – Lucky

im은 console.its에서 어떤 오류도 표시하지 않고 차트를 표시하지 않습니다. – Swapna

jsfiddle.net에서 코드를 다시 작성하고 여기에 링크를 게시하십시오. – Lucky

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

출처

2017-02-22 13:45:15 Lucky

덕분에, 그게 나를 위해 일하고 ... – Swapna

유 매 30 초마다 차트를 새로 고치는 방법을 말해 줄 수 있습니다 – Swapna

당신은 오신 것을 환영합니다. 자바 스크립트에서'setInterval()'메소드를 사용하고'n' 초마다'LoadChart()'메소드를 호출하면된다. 여기를 참조하십시오 http://stackoverflow.com/questions/21638574/run-a-function-every-30-seconds-javascript'setInterval (function() { LoadChart()}, 30000)'Don 내 대답의 왼쪽에있는 눈금을 확인해서 그것을 받아들이는 것을 잊지 마십시오. – Lucky

API에서 데이터를 가져 와서 차트

답변

관련 문제