Question

我的高保真问题，就是我的图表没有出现。我使用Codeigniter并将数据（从表格）转换为JSON。我想根据Population

显示Amount和Date

这是我的 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');
}

这是 VIEW 中的 Highchart 脚本：

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>

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

Answer 1

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);
        });

Highchart无法正常工作（Codeigniter - JSON - Bootstrap）

1 个答案: