Индикатор Highcharts, устанавливает полученные данные после вызова $ .getJSON

У меня возникают трудности с получением данных, полученных из PHP-скрипта, и их настройкой в ​​графе Gauge.
Я получаю результат JSON правильно, просто не знаю, как установить его на правильные переменные датчика Highchart (gaugeOptions).

Я хотел бы положить в # Контейнер-C_2 возвращаемые значения из PHP, поэтому настройте min, max и установите значение на графике калибровки.
сильный текст
Я думаю, что в $ .GetJSON () Тело мне нужно позвонить
$ ( ‘# Контейнер-C_2’). Highcharts ( с некоторыми аргументами, но не знаю, как ..

Может ли кто-нибудь помочь мне здесь?

Большое спасибо.

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>

0

Решение

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'];
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]