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_

Вам нужно создать таблицу внутри обратного вызова, например, заменить 'оповещения (data1)' с создания диаграммы. И там у вас есть доступ к 'data1', где вам нужно написать парсер из строки' data1' в правильный формат для Highcharts. Кроме того, поскольку у вас есть jQuery на вашем веб-сайте, я думаю, вы можете использовать метод '$ .get()' вместо прямого использования 'xhr'. –

спасибо за ваш ответ. Вот решение, которое работает:

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

ответ

Смежные вопросы