Question

我正在尝试使用highcharts从php json中提取数据。

php工作正常，但我不知道如何让json成为输入。

特别想要将数据放在单个Gauge Chart上，就像示例中的那个一样，但是我无法配置脚本来读取json。

网址：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);

结果如下：

[{"data":29655.88482666}]

所以我需要将该URL的信息放到仪表图表中。

我正在尝试使用getjson，但我遗漏了一些东西，因为图表加载了但不是数据。

这是ototinal highchart示例

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/

这是我的数据

的示例

<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>

我得到了图片，但它没有加载任何数据

Answer 1

数据需要是一个数组。让你的后端返回

[{
    "data": [29655.88482666]
}]

http://jsfiddle.net/nicholasduffy/openzant/3/

highchart加载图表但不加载JSON数据

1 个答案: