1

我是 highcharts 的新手,我正在尝试通过将数据从我的控制器文件传递到我的视图文件来创建一个 highchart。不幸的是,我无法动态地将数据放入我的系列中。下面是我的控制器和视图文件:

控制器:graph.php

<?php
class Graph extends CI_Controller {
function __construct() {
    parent::__construct();
}

function index() {

            $data['title']='Graph for hourly distribution of results based on Location';
            $xaxis=array('2','4','6','8','10');
            $y1axis=array(5,8,4,6,4);
            $y2axis=array(4,6,8,4,5);
            $yaxis=array($y1axis,$y2axis);
            $data['xlabel']='X-Axis Name';
            $data['ylabel']='Y-Axis Name';
            $data['type']='line';
            $arry = array('xdata' => $xaxis,'ydata' => $yaxis,'title' => $data['title'],'type' => $data['type'],'xlabel' => $data['xlabel'],'ylabel' => $data['ylabel']);
            $this -> load -> view('graph_js', $arry);
        } 

    }

?>

查看文件:graph_js.php

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="../../Highcharts-2.2.5/js/themes/gray.js"></script>
<script type="text/javascript" src="../../Highcharts-2.2.5/js/modules/exporting.js">    </script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
var chart;
$(document).ready(function() {
        var options = {
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },

        title: {
            text: '<?php echo $title ?>',
            x: -20 //center
        },

        subtitle: {
            text: '<?php echo $xlabel ?>',
            x: -20
        },

        xAxis: {
            categories: []
        },

        yAxis: {
            title: {
                text: '<?php echo $ylabel ?>'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },

        series: []

    }
            options.xAxis=new Array();
            options.xAxis[0] = new Object();
            options.xAxis[0].categories = new Array(<?php echo join(", ", $xdata) ?>);

            options.series = new Array();

            var i;
            var j=<?php echo count($ydata) ?>;
            <?php echo $k=0; ?>;
            for(i=0;i<j;i++)
            {
                options.series[i] = new Object();
                options.series[i].name = 'Sample'+i;
                options.series[i].data = new Array(<?php echo join(", ", $ydata[$k++]) ?>);

            }

            chart = new Highcharts.Chart(options);         

});

</script>
</head>
</html>

上面的代码绘制了图形的第一个系列并与第一个系列本身的第二个系列重叠,但是如果我尝试通过放置以下代码而不是 for 循环来手动完成它,它可以通过绘制两个不同的系列来正常工作

options.series[0] = new Object();
options.series[0].name = 'Sample1';
options.series[0].data = new Array(<?php echo join(", ", $ydata[0]) ?>);

options.series[1] = new Object();
options.series[1].name = 'Sample2';
options.series[1].data = new Array(<?php echo join(", ", $ydata[1]) ?>);

有人可以帮我解决这个问题吗?我的循环有什么问题吗?

4

1 回答 1

1

改用 JSON... 用于json_encode()创建系列... 老实说,它会为您节省很多麻烦 :)

于 2012-06-26T14:47:13.593 回答