Highcharts：借鑑與XMLHttpRequest的數據的圖表（）

我在javascript開始...Highcharts：借鑑與XMLHttpRequest的數據的圖表（）

我想提請與XMLHttpRequest的（數據圖表）爲YAXIS。我從服務器接收數據是這樣的：

function cgi_return_data_conso_elec() 
{ 
    var xhr = new XMLHttpRequest(); 

    xhr.open("GET", "/cgi-bin/return_data_conso_elec?01/04/2015", true); 
    xhr.send(null); 

    xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
     { 
     var array_reponse = xhr.responseText.split("/"); 
     var data1 = array_reponse[1]; 
     alert(data1); 
     } 
     else 
     { 
     //document.getElementById("text_test").innerHTML = "wait..."; 
     } 
    } 
}

DATA1的值= 333,2682,2823,1749,624,860,4450,2402,2552,2199,605,794,2433,4060,821,692,477， 1005,2904,2438,2066,1652,1672,1544 我畫的圖是這樣的：

$('#container').highcharts 
    ({ 
     chart: 
     { 
      type: 'column' 
     }, 
     title: 
     { 
      text: 'CONSO ELEC' 
     }, 
     subtitle: 
     { 
      text: 'Source: PATATE.com' 
     }, 
     xAxis: 
     { 
      categories: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'], 

     labels: 
     { 
       rotation: - 90, 
      //align: 'right', 
      x: -26, 
       y: 15 
      //distance: 100, 
      //padding: 175 
      //format: '{value} km' 
      } 
     //crosshair: true 
     }, 
     yAxis: 
     { 
      min: 0, 
      title: 
     { 
       text: 'Conso (Wh)' 
      } 
     }, 
     plotOptions: 
     { 
      column: 
     { 
       pointPadding: 0, 
       borderWidth: 0 
      } 
     }, 

     series: [{ 

      name: 'Berlin', 
     data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1,42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

     }] 
    });

我要替換「柏林」變量「DATA1」的數據，但我不能！

我的HTML頁面：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 

    <link rel="stylesheet" href="test_style.css" /> 

    <script type="text/javascript" src="/lib-js/jquery.min.js"></script> 
    <script src="/lib-js/highcharts/highcharts.js"></script> 
    <script src="/lib-js/highcharts/modules/exporting.js"></script> 
    <script src="test_code_js.js"></script> 

    <title>test graph data conso elec</title> 
</head> 
<body onload="cgi_return_data_conso_elec();"><!-- lance la fonction au chargement de la page --> 

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

</body> 

</html>

我知道，必須使用：「series.data.push（parseFloat（項目））;」

，但我不能將其放在了我的代碼...

如果有人能幫助我，我會很高興...... 預先感謝您

來源

2015-04-06 alex_

您需要創建回調裏面的圖表，例如更換'警報（數據1）;'與創建圖表。在那裏你可以訪問'data1'，在那裏你需要將你的'data1'字符串中的解析器寫入Highcharts格式。另外，既然你在你的網站上有jQuery，我想你可能想用'.get（）'方法而不是直接使用'xhr'。 – 2015-04-07 08:55:43

感謝您的回覆。這裏是一個有效的解決方案：

function graph_teleinfo() 
{ 

var xhr = new XMLHttpRequest(); 

    xhr.open("GET", "/cgi-bin/return_data_conso_elec?01/04/2016", true); 
    xhr.send(null); 

    xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
     { 

      var array_reponse = xhr.responseText.split("/");//separe les differents champs du str reponse 

     var data_tempo; 
     var data1 = new Array(); 
     data_tempo = array_reponse[1].split(","); 
     //alert(data2.length); 

     var data3 = new Array(); 
     data3 = array_reponse[2].split(","); 
     //alert(data3); 

     for (var i = 0; i < data_tempo.length; i++) 
     { 
      data1[i] = parseFloat(data_tempo[i]);//stock les valeur du str contenu dans "xhr.responseText" dans le tableau et les transforme en float 

     }//fin for... 

//----------------------------------------------- 
//construit le graph 

     $('#container').highcharts 
     ({ 

      chart: 
      { 
       type: 'column' 

      }, 
      title: 
      { 
       text: '01/04/2015' 
      }, 
      subtitle: 
      { 
       text: 'Source: raspi-elec' 
      }, 
      xAxis: 
      { 
       categories: data3, 

       labels: 
       { 
        rotation: - 90, 
        align: 'right', 
        //x: -30 , 
        //y: 15 

       } 

      }, 
      yAxis: 
      { 
       min: 0, 
       title: 
       { 
        text: '(Wh)' 
       }, 

       labels: 
       { 

       }, 
      }, 
      tooltip: 
       { 

        useHTML: true, 
        pointFormat: '{point.y} Wh' 

       }, 
      plotOptions: 
      { 
       column: 
       { 
        pointPadding: 0, 
        borderWidth: 0 
       } 
      }, 

      series: 
      [{ 

       name: 'Consommation électrique', 
       data: data1 

      }] 
     }); 

//----------------------------------------------- 

     } 
     else 
     { 
     //document.getElementById("text_test").innerHTML = "wait..."; 
     } 
    } 


}//fin fonction graph_teleinfo()

來源

2015-04-07 21:28:45

Highcharts：借鑑與XMLHttpRequest的數據的圖表（）

回答

相關問題