Highcharts：使用XMLHttpRequest（）中的数据绘制图表
我从javascript开始 我想用XMLHttpRequest（）中关于YAXIS的数据绘制一个图表。 我从服务器接收数据的方式如下：Highcharts：使用XMLHttpRequest（）中的数据绘制图表,highcharts,xmlhttprequest,cgi,Highcharts,Xmlhttprequest,Cgi,我从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.onread
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...";
}
}
}
$('#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]
}]
});
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...";
}
}
}
$('#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]
}]
});
<!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>
测试图数据conso elec
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()
函数图\u teleinfo（）
{
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，“/cgi bin/return\u data\u conso\u elec？01/04/2016”，真）；
xhr.send（空）；
xhr.onreadystatechange=函数（）
{
如果（xhr.readyState==4&&（xhr.status==200 | | xhr.status==0））
{
var array_reponse=xhr.responseText.split（“/”）；萼片不同于str reponse
var数据节奏；
var data1=新数组（）；
数据节奏=数组响应[1]。拆分（“，”；
//警报（数据2.长度）；
var data3=新数组（）；
data3=数组_响应[2]。拆分（“，”）；
//警报（数据3）；
对于（变量i=0；ialert（data1）创建图表。在这里，您可以访问data1
，在这里您需要将解析器从data1
字符串编写为Highcharts的正确格式。另外，由于您的网站上有jQuery，我认为您可能希望使用$.get（）
方法，而不是直接使用xhr
。