以动态方式在高级图表中插入系列数据

时间:2012-06-26 14:40:43

标签: javascript highcharts

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

控制器: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);
        } 

    }

?>

Viewfile: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]) ?>);

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

1 个答案:

答案 0 :(得分:1)

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