高图表不起作用(代码点火器 - JSON - 引导)



我的高图表有问题,那就是我的图表没有出现。我使用Codeigniter,并将数据(从表)转换为JSON。我旺展示基于DatePopulationAmount

这是我的 JSON 数据:

[{
  "name":"Date",
  "data":["27-OCT-14","28-OCT-14","29-OCT-14","30-OCT-14","31-OCT-14","01-NOV-14","02-NOV-14"]
 },
 {
  "name":"Population",
  "data":[6171,6990,6882,6889,6860,7619,6698]
 },
 {"name":"Amount",
  "data":[361154716.01,409210099.77,407191552.71,416366585.57,418588842.18,435168113.68,402163667.57]
}] 

这是我曾经encode_json的控制器

function daily(){
    $data=array(
            'title'=>'SOA_OTC - Daily',
            '=>$this->model_app->get_Soa_Daily()
        );
    $category = array();
    $category['name'] = 'Date';
    $series1 = array();
    $series1['name'] = 'Population';
    $series2 = array();
    $series2['name'] = 'Amount';
    foreach($data['day']['START_EXECUTION'] as $row){
        $category['data'][] = $row;
    }
    foreach($data['day']['NUM_OF_POPULATION'] as $row){
        $series1['data'][] = $row;
    }
    foreach($data['day']['SUM_AMOUNT'] as $row){
        $series2['data'][] = $row;
    }

    $result = array();
    array_push($result,$category);
    array_push($result,$series1);
    array_push($result,$series2);
    print json_encode($result, JSON_NUMERIC_CHECK);
    $this->load->view('element/v_header',$data);
    $this->load->view('pages/v_soaotc_daily');
    $this->load->view('element/v_footer');
}

这是我在视图中的高图表脚本:

script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'containers',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Project Requests',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Requests'
                    },
                    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: []
            }
            $.getJSON('daily', function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                var chart = new Highcharts.Chart(options);
            });
        });
        </script>
<div id="containers" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

我的代码有问题吗?非常感谢您的帮助。谢谢

options.series是一个

空数组,你必须推入它:

        $.getJSON('daily', function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series.push(json[1]);
            options.series.push(json[2]);
            var chart = new Highcharts.Chart(options);
        });

最新更新