我很难从PHP脚本中获取数据并将其设置到Gauge图中。我得到了正确的json结果，只是不知道如何将其设置为正确的Highchart度量变量（gaugeOptions）。
我想把PHP返回的值放在#container-C_2中，所以在量表图上配置最小值、最大值并设置值。strong文本我认为在$.getJSON（）正文中，我需要调用$（'#container-C_2'）.带一些参数的高图（，但不知道如何操作.
有人能帮我吗？
非常感谢。
PHP
$result = array();
$result['name'][0] = 'A';
//--some values
$result['min'][] = 10;
$result['max'][] = 50;
$result['val'][] = 20;
$json = array();
array_push($json,$result);
print json_encode($json);
客户端端：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '100%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.25, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.75, '#55BF3B'], // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
}; //-- gaugeOptions
// The C_1 gauge
$('#container-C_1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: -50,
max: 50,
title: {
text: 'graph 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'C_1',
data: [-50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver"> graph... </span></div>'
},
tooltip: {
valueSuffix: ' graph... '
}
}]
}));
// The C_2 gauge
$('#container-C_2').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: -50,
max: 50,
title: {
text: 'C_2'
}
},
series: [
{
name: 'C_2',
data: [45],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver"> graph... </span></div>'
},
tooltip: {
valueSuffix: ' graph... '
}
}
]
})); //--container-C_2
$.getJSON("query.php", function(json) {
//this WORKS!
alert("name, grow_rate: " + json[0]['name'] + ","+ json[0]['val'] );
//This seems not to have any effect
gaugeOptions.yAxis.min = json[0]['min'];
gaugeOptions.yAxis.max = json[0]['max'];
gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';
gaugeOptions.series[0] = {};
//gaugeOptions.series[0].name = json[0]['name'][0];
gaugeOptions.series[0].name = json[0]['name'];
gaugeOptions.series[0].data = json[0]['val'];
//-- stucked here, how can I passed retreived values to the graph?
// chart = new Highcharts.merge(gaugeOptions);
});
}); //-- ready()
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-C_1" style="width: 300px; height: 200px; float: left"></div>
<div id="container-C_2" style="width: 300px; height: 200px; float: left"></div>
</div>
</head>
<body>
</body>
</html>
var point = $('#container-C_2').highcharts().series[0].points[0];
point.update(json[0]['val']);
而不是这个
//This seems not to have any effect
gaugeOptions.yAxis.min = json[0]['min'];
gaugeOptions.yAxis.max = json[0]['max'];
gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';
gaugeOptions.series[0] = {};
//gaugeOptions.series[0].name = json[0]['name'][0];
gaugeOptions.series[0].name = json[0]['name'];
gaugeOptions.series[0].data = json[0]['val'];