Question

我从javascript开始...

我想用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]

        }]
    });

我想替换＆＃34; Berlin＆＃34;的数据。通过变量＆＃34; data1＆＃34;但我不能!!

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

我知道必须使用：＆＃34; series.data.push（parseFloat（item））;＆＃34;

但我不能把它放在我的代码中......

如果有人能帮助我，我会很开心...... 提前谢谢你

Answer 1

谢谢你的回复。这是一个有效的解决方案：

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

Highcharts：使用XMLHttpRequest（）中的数据绘制图表

1 个答案: