高图加载图表但不包含JSON数据 [英] highchart load the chart but not the JSON data
本文介绍了高图加载图表但不包含JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用highcharts从php json中绘制数据。
php工作正常，但我不知道如何使json成为输入。
具体地说，我试图将数据放在单个Gauge Chart上，就像示例中的那个一样，但我无法配置脚本读取json。
URL si：php / KPItonsStock.php
<？php
函数getArraySQL（）{
$ startd =29964;
$ endd =29968;
$ dsn =prueba;
$ connect = odbc_connect（$ dsn，''，''）;
$ query =
从
中选择SUM（TON_DESCARGADO）作为数据
（选择单位，[load]，enum_LOAD [name]，SUM（dumptons）作为TON_DESCARGADO
来自hist_dumps内部连接hist_loclist on hist_dumps.shiftindex = hist_loclist.shiftindex
和hist_dumps.loc = hist_loclist.locid
内部连接enum_LOAD on hist_dumps。[load] = enum_LOAD。[num]
其中'$ startd'和'$ endd'之间的hist_dumps.shiftindex
GROUP BY loc，UNIT，unit＃，[load]，enum_LOAD。[name]）TEMP1
单位='库存'
GROUP BY单位
单位BY UNIT;
if（！$ rs = odbc_exec（$ connect，$ query））die（）;
$ rawdata = array（）;
$ i = 0;
while（$ row = odbc_fetch_array（$ rs））
{
$ rawdata [$ i] = $ row;
$ i ++;
}
odbc_close（$ connect）;
返回$ rawdata;
};
$ data = getArraySQL（）;
echo json_encode（（$ data），JSON_NUMERIC_CHECK）;
，结果如下：
[{data：29655.88482666}]
将该URL中的信息添加到量表。
我试着用getjson，但我错过了一些东西，因为图表加载的是数据但不是数据。
这是原始高拓展示例
这是我的数据
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title> Highcharts示例< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js><<<< ; /脚本>
< 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.js>< / script>
< style type =text / css>
$ {demo.css}
< / style>
< script type =text / javascript>
函数visitorData（data）{
$（'＃container'）。highcharts（{
图：{
类型：'solidgauge'
} ，
title：{
text：'Average Visitors'
}，
pane：{
center：['50％'，'85％ ']，
size：'140％'，
startAngle：-90，
endAngle：90，
背景：{
backgroundColor：（Highcharts.theme& & Highcharts.theme.background2）||'#EEE'，
innerRadius：'60％'，
outerRadius：'100％'，
shape：'arc'
}
}，
yAxis：{
min：0，
max：40000，
title：{
text：'Speed' }，
stops：[
[0.1，'＃55BF3B']，//绿色
[0.5，'＃DDDF0D']，//黄色
[0.9，'＃ DF5353'] // red
]，
lineWidth：0，
minorTickInterval：null，
tickPixelInterval：400，
tickWidth：0，
title： {
y：-70
}，
标签：{
y：16
}
}，
系列：数据，
}）;
$（document）.ready（function（）{
$ .ajax（{
url：'report2 / KPItonsStock.php'，
type：' GET'，
async：true，
dataType：json，
success：function（data）{
visitorData（data）;
}
}）;
}）;
< / script>
< / head>
< body>
< div style =width：600px; height：400px; margin：0 auto>
< div id =containerstyle =width：300px; height：200px; float：left>< / div>
< / div>
< / body>
< / html>
我得到图形，但没有加载任何数据
解决方案
数据需要是一个数组。让您的后端返回
[{
data：[29655.88482666]
}]
http://jsfiddle.net/nicholasduffy/openzant/3/
I'm trying to use highcharts to draw data from php json.
the php works ok but i dont know how to make the json an input.
Speciffically 'm trying to put the data on single Gauge Chart like the one on the example, but i can't configure the script to read the json.
The URL si this: php/KPItonsStock.php
<?php
function getArraySQL(){
$startd = "29964";
$endd = "29968";
$dsn = "prueba";
$connect = odbc_connect( $dsn, '', '' );
$query = "
Select SUM(TON_DESCARGADO) AS data
from
(Select unit,[load],enum_LOAD.[name],SUM(dumptons) as TON_DESCARGADO
from hist_dumps inner join hist_loclist on hist_dumps.shiftindex = hist_loclist.shiftindex
and hist_dumps.loc = hist_loclist.locid
inner join enum_LOAD on hist_dumps.[load] = enum_LOAD.[num]
where hist_dumps.shiftindex between '$startd' and '$endd'
GROUP BY loc,UNIT,unit#,[load],enum_LOAD.[name])TEMP1
where unit = 'Stockpile'
GROUP BY unit
order BY UNIT";
if(!$rs = odbc_exec($connect, $query)) die();
$rawdata = array();
$i=0;
while($row = odbc_fetch_array($rs))
{
$rawdata[$i] = $row;
$i++;
}
odbc_close( $connect );
return $rawdata;
};
$data = getArraySQL();
echo json_encode(($data), JSON_NUMERIC_CHECK);
and the result is this:
[{"data":29655.88482666}]
so i need to put information from that URL to the gauge chart.
Im trying with getjson, but I'm missing something, because the chart loads but not the data.
This is the otriginal highchart example
This is the example with my data
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.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.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
function visitorData (data) {
$('#container').highcharts({
chart: {
type: 'solidgauge'
},
title: {
text: 'Average Visitors'
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: {
min: 0,
max: 40000,
title: {
text: 'Speed'},
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
series: data,
});
}
$(document).ready(function() {
$.ajax({
url: 'report2/KPItonsStock.php',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
visitorData(data);
}
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container" style="width: 300px; height: 200px; float: left"></div>
</div>
</body>
</html>
I get the graphic but it doesnt load any data
解决方案
Data needs to be an array. Make your backend return
[{
"data": [29655.88482666]
}]
http://jsfiddle.net/nicholasduffy/openzant/3/
这篇关于高图加载图表但不包含JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
