Highchart-使用PHP，MYSQL和jQuery.get来解析数据 [英] Highchart- Using PHP, MYSQL and jQuery.get to parse data
本文介绍了Highchart-使用PHP，MYSQL和jQuery.get来解析数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图从MYSQL显示数据。
我在 http：/ /www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql/ 。我如何为我的图表实现jQuery.get？请给我很新的jQuery，并且需要很多帮助，谢谢！有人可以让我的图表显示数据吗？
图表html
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/ HTML4 / loose.dtd>
< html>
< head>
< meta charset =utf-8>
< script src =http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js>< / script>
< script src =http://www.highcharts.com/js/adapters/prototype-adapter.src.js>< / script>
< script src =http://www.highcharts.com/js/highcharts.src.js>< / script>
< script>
var chart;
function create（）
{
chart = new Highcharts.Chart（{
chart：{renderTo：'container'，defaultSeriesType：'spline'，height：400}，
title：{text：'SEN-2 Bulkhead Isolation'}，
xAxis：{title：{text：'Frequency Hz'}，输入：'logarithmic'}，
yAxis：{title：{text：'Isolation dB'}，plotLines：[{value：0，width：1，color：'＃808080'}]
}，
tooltip：{
formatter：function（）{
return'< b>'+ this.series.name +'< / b>< br />'+'（'+
this.x +'，'+ this.y +'）';}
}，
legend：{layout：'vertical'，align：'right'，verticalAlign：'top'，x：40，y ：100，borderWidth：0，width：300}，
series：[{
name：'SSTP Keystone S TEEL'，
数据：[[0.6,74.9]，[0.895,81.74]，[1.336,77.26]，[1.993,76.81]，[2.974,80.45]，[4.438,69.41]，[6.622,61.37 ]，[9.881,79.07]，[14.744,79.75]，[20.000,72.33]]，pointStart：0.6
}，{
名称：'SSTP Keystone COPPER'，
data：[ [0.6,70.18]，[0.895,85.57]，[1.336,75.1]，[1.993,76.09]，[2.974,80.45]，[4.438,67.32]，[6.622,59.79]，[9.881,72.37]，[14.744 ，点数开始：0.6
}，{
名称：'SSTP Keystone COPPER UTP天线'，
数据：[[0.6,53.32]，[0.895 ，56.53]，[1.336,72.16]，[1.993,65.82]，[2.974,80.45]，[4.438,63.16]，[6.622,59.79]，[9.881,69.63]，[14.744,70.41]，[20.000,73.45 ]]，pointStart：0.6
}，{
name：'SSTP Keystone COPPER STP antenna'，
data：[[0.6,62.33]，[0.895,61.82]，[1.336,79.92 ]，[1.993,76.09]，[2.974,76.18]，[4.438,63.16]，[ 6.622,61.37]，[9.881,72.37]，[14.744,74.68]，[20.000,72.33]]，pointStart：0.6
}，{
名称：'吸收器内部束套'，
数据：[]
}，{
名称：'Series6'，
data：[]
}，{
名称：'SEN-2 Baseline Isolation' ，
数据：[[0.6,76.07]，[0.895,90.28]，[1.336,77.26]，[1.993,82.58]，[2.974,83.53]，[4.438,74.63]，[6.622,63.45]， [9.881,76.86]，[14.744,76.98]，[20.000,72.33]]，pointStart：0.6
}]，
}）;
函数destroy（）
{
if（chart）{
chart.destroy（）;
删除图表;
chart = null;
document.observe（dom：loaded，function（）{
$（'destroy'）。observe（click，function （）{）（）;}）
$（'create'）。observe（click，function（）{create（）;}）
create（）;
}） ;
< / script>
< / head>
< body>
< a id =destroyhref =＃>销毁< / a> | < a id =createhref =＃>建立< / a>
< div id =containerstyle =height：400px; width：900px>< / div>
< / body>
< / html>
解决方案
好的，这是一个完整的解决方案：
<！DOCTYPE html>< html>< head>
< / head>< body>
< div id =containerstyle =height：400px; width：900px>< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>
< script src =http://www.highcharts.com/js/highcharts.src.js>< / script>
< script>
jQuery（function（$）{
var options = {
chart：{renderTo：'container'，defaultSeriesType：'spline'，height：400}，
title：{ text：'SEN-2 Bulkhead Isolation'}，
xAxis：{title：{text：'Frequency Hz'}，type：'logarithmic'}，
yAxis：{title：{text：'Isolation dB'}，plotLines：[{value：0，width：1，color：'＃808080'}]}，
tooltip：{
formatter：function（）{
return'< ; b>'+ this.series.name +'< / b>< br />'+'（'+ this.x +'：'+ this.y +'）';
}
}，
legend：{layout：'vertical'，align：'right'，verticalAlign：'top'，x：40，y：100，borderWidth：0，width：300}，
series：[]
};
jQuery.get（'data2.php'，null，function（tsv）{
var data = {};
tsv = tsv.split（/ \\\
/ g）; //分成行
for（var row = 0，rows = ts v.length; row< rows; row ++）{
var line = tsv [row] .split（/ \ t / g），// split into columns
series_name = line [0]，
x = Number（行[1]），
y = Number（行[2]）;
if（！data [series_name]）data [series_name] = [];
data [series_name] .push（[x，y]）;
}
for（var series_name in data）{
options.series.push（{
name：series_name，
data：data [series_name]
}）;
}
new Highcharts.Chart（options）;
}）;
}）;
< / script>
< / body>< / html>
我用这个TSV数据测试了它：
SSTP Keystone STEEL 0.6 74.9
SSTP Keystone STEEL 0.895 81.74
SSTP Keystone STEEL 1.336 77.26
SSTP Keystone STEEL 1.993 76.81
SSTP Keystone STEEL 2.974 80.45
SSTP Keystone STEEL 4.438 69.41
SSTP Keystone STEEL 6.622 61.37
SSTP Keystone STEEL 9.881 79.07
SSTP Keystone STEEL 14.744 79.75 $ b $ SSTP Keystone STEEL 20.000 72.33
我正在循环TSV并构建数据
$ p $ {
'SSTP Keystone STEEL '：[[0.6,74.9]，[0.895,81.74]，...]，
...
}
然后循环数据变量并构造 options.series 以HighCharts期望的格式 - 一个名称 prope的对象数组rty和 data 属性。
I'm trying to display data from MYSQL. I saw an example at http://www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql/. How do I implement jQuery.get for my chart? Please I'm very new to jQuery and need lots of help thanks! Can someone get my chart to display the data?
html for chart
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
<script src="http://www.highcharts.com/js/adapters/prototype-adapter.src.js" ></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
var chart;
function create()
{
chart = new Highcharts.Chart({
chart: {renderTo: 'container', defaultSeriesType:'spline', height: 400},
title: {text: 'SEN-2 Bulkhead Isolation'},
xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
yAxis: {title: {text: 'Isolation dB'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+'('+
this.x +' , '+ this.y +')';}
},
legend: {layout: 'vertical', align: 'right', verticalAlign: 'top', x: 40, y: 100, borderWidth: 0, width: 300 },
series: [{
name: 'SSTP Keystone STEEL',
data: [[0.6,74.9 ],[0.895,81.74],[ 1.336,77.26],[ 1.993,76.81], [2.974,80.45 ],[4.438,69.41], [6.622,61.37],[9.881,79.07],[14.744,79.75],[20.000,72.33]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER',
data: [[0.6,70.18 ],[0.895,85.57],[ 1.336,75.1],[ 1.993,76.09], [2.974,80.45 ],[4.438,67.32], [6.622,59.79],[9.881,72.37],[14.744,73.54],[20.000,72.8]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER UTP antenna',
data: [[0.6,53.32], [0.895,56.53], [1.336,72.16], [1.993,65.82],[2.974,80.45],[4.438,63.16],[6.622,59.79],[9.881,69.63],[14.744,70.41],[20.000,73.45]],pointStart: 0.6
}, {
name: 'SSTP Keystone COPPER STP antenna',
data: [[0.6,62.33], [0.895,61.82], [1.336,79.92], [1.993,76.09],[2.974,76.18],[4.438,63.16],[6.622,61.37],[9.881,72.37],[14.744,74.68],[20.000,72.33]],pointStart: 0.6
}, {
name: 'absorber inside bundle shield',
data: []
}, {
name: 'Series6',
data: []
}, {
name: 'SEN-2 Baseline Isolation',
data: [[0.6,76.07], [0.895,90.28], [1.336,77.26], [1.993,82.58],[2.974,83.53],[4.438,74.63],[6.622,63.45],[9.881,76.86],[14.744,76.98],[20.000,72.33]],pointStart: 0.6
}],
});
}
function destroy()
{
if( chart ) {
chart.destroy();
delete chart;
chart = null;
}
}
document.observe("dom:loaded", function() {
$('destroy').observe("click", function(){destroy();})
$('create').observe("click", function(){create();})
create();
});
</script>
</head>
<body>
<a id="destroy" href="#">destroy</a> | <a id="create" href="#">create</a>
<div id="container" style="height: 400px; width: 900px"></div>
</body>
</html>
解决方案
Okay, here's a complete solution:
<!DOCTYPE html><html><head>
</head><body>
<div id="container" style="height: 400px; width: 900px"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
var options = {
chart: {renderTo: 'container', defaultSeriesType:'spline', height: 400},
title: {text: 'SEN-2 Bulkhead Isolation'},
xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
yAxis: {title: {text: 'Isolation dB'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +' : '+ this.y +')';
}
},
legend: {layout: 'vertical', align: 'right', verticalAlign: 'top', x: 40, y: 100, borderWidth: 0, width: 300 },
series: []
};
jQuery.get('data2.php', null, function(tsv) {
var data = {};
tsv = tsv.split(/\n/g); // split into rows
for (var row=0, rows=tsv.length; row<rows; row++) {
var line = tsv[row].split(/\t/g), // split into columns
series_name = line[0],
x = Number(line[1]),
y = Number(line[2]);
if (!data[series_name]) data[series_name] = [];
data[series_name].push([x,y]);
}
for (var series_name in data) {
options.series.push({
name: series_name,
data: data[series_name]
});
}
new Highcharts.Chart(options);
});
});
</script>
</body></html>
I tested it with this TSV data:
SSTP Keystone STEEL 0.6 74.9
SSTP Keystone STEEL 0.895 81.74
SSTP Keystone STEEL 1.336 77.26
SSTP Keystone STEEL 1.993 76.81
SSTP Keystone STEEL 2.974 80.45
SSTP Keystone STEEL 4.438 69.41
SSTP Keystone STEEL 6.622 61.37
SSTP Keystone STEEL 9.881 79.07
SSTP Keystone STEEL 14.744 79.75
SSTP Keystone STEEL 20.000 72.33
What I'm doing is looping thru the TSV and building the data variable like an associative array keyed on the series name, like this:
{
'SSTP Keystone STEEL': [[0.6,74.9],[0.895,81.74],...],
...
}
Then I am looping through the data variable and constructing options.series in the format that HighCharts expects - an array of objects with a name property and a data property.
这篇关于Highchart-使用PHP，MYSQL和jQuery.get来解析数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
