php - 通过 json_encode 使用 php 填充 highcharts

Question

几天来，我一直在通过 php 处理 highcharts 和 json_encode。我相信我的数据格式正确，但图表没有正确更新。类别数据已更新，用于绘制列和行数据图表的系列数据按应有的格式设置。

谁能帮我走完剩下的路。这是我正在使用的 php 脚本和 highcharts javascript。

感谢您的帮助:

<?php          
// data feed to power dynamic charts
include_once('db_conn.php');

// get site data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS     clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY   impressions DESC");
$rows = array();
while($r = mysql_fetch_array($query)) {
    $rows['categories'][] = $r['site'];
}

// get impression data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY    impressions DESC");
$rows1 = array();
$rows1['name'] = 'Impressions';
$rows1['color'] = '#4572A7';
$rows1['type'] = 'column';
$rows1['yAxis'] = 1;
while($rr = mysql_fetch_array($query)) {
    $rows1['data'][] = $rr['impressions'];
}

// get ctr data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY impressions DESC");
$rows2 = array();
$rows2['name'] = 'CTR';
$rows2['color'] = '#89A54E';
$rows2['type'] = 'spline';
while($rrr = mysql_fetch_array($query)) {
 $ctr = number_format(($rrr['clicks']/$rrr['impressions'])*(100),2,'.',',');
 $impressions = number_format($rrr['impressions'],0,'.',',');
 $clicks = number_format($rrr['clicks'],0,'.',',');
    $rows2['data'][] = $ctr;
}

$result = array();
$result1 = array();
array_push($result,$rows);
array_push($result1,$rows1);
array_push($result1,$rows2);


?>

<script>
$(function () {
     $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Performance by Site'
        },
        subtitle: {
            text: ''
        },
        xAxis: 
        <?php echo json_encode($result); ?>
        ,
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}%',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'CTR',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Impressions',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        series: <?php echo json_encode($result1); ?>
     });
  });
</script>

var_dump($result) 输出如下

array(1) { [0]=> array(1) { ["categories"]=> array(5) { [0]=> string(13) "Search Medica" [1]=> string(10) "Medscape 4" [2]=> string(11) "onclive.com" [3]=> string(22) "Oncology Nurse Advisor" [4]=> string(25) "chemotherapyadvisor.com 1" } } }

var_dump($result1) 输出如下

string(7) "result1"

这也是两者的 json_encode 输出:

json_encode $结果

[{"categories":["Search Medica","Medscape 4","onclive.com","Oncology Nurse Advisor","chemotherapyadvisor.com 1"]}]

json_encode $result1

[{"name":"Impressions","color":"#4572A7","type":"column","yAxis":1,"data":[140521,71905,69295,68456,49487]},{"name":"CTR","color":"#89A54E","type":"spline","data":[0.11,0.04,0.2,0.09,0.05]}]

Answer 1

正如我所见，问题仅在于通过 ajax 或类似方式获取数据，因为当我粘贴您的 JSON(看起来不错)时，一切正常 http://jsfiddle.net/6fZcz/因此，如果您收到任何错误，我建议您查看控制台。更何况 php 文件与带有图表的脚本位于同一台服务器上？

$('#container').highcharts({
    chart: {
        type: 'line',
        marginRight: 10
    },
    xAxis: [{
        "categories": ["Search Medica", "Medscape 4", "onclive.com", "Oncology Nurse Advisor", "chemotherapyadvisor.com 1"]
    }],
    series: [{
        "name": "Impressions",
            "color": "#4572A7",
            "type": "column",
        //"yAxis": 1,
        "data": [140521, 71905, 69295, 68456, 49487]
    }, {
        "name": "CTR",
            "color": "#89A54E",
            "type": "spline",
            "data": [0.11, 0.04, 0.2, 0.09, 0.05]
    }]
});