Question

我想根据带有ajax的点击按钮重绘和更新数据Highcart。此代码仍无效。

   $('#chartday').on('click', function() {
        $('#my_start_date').datepicker();
        $('#my_end_date').datepicker();

            var p_id_resto = $('#p_id_resto').val();
            var start_date = $('#my_start_date').val();
            var end_date = $('#my_end_date').val();
            var idResto = JSON.stringify(p_id_resto); 
            var startDate = JSON.stringify(start_date);
            var endDate = JSON.stringify(end_date);
            var base_url = '<?php echo base_url();?>main2nd/charts_day';

            console.log('get Id resto = ' + idResto);
            console.log('get Start date = ' + startDate);
            console.log('get URL = ' + base_url);

            $.ajax({
                url: base_url,
                type: 'POST',
                dataType: "json",
                data : {p_id_resto : idResto,
                        start_date : startDate,
                        end_date : endDate},

            }).done(function(result) {
                console.log(result.data_stock);
                chart.series[0].setData(['BD', result.data_stock['BD']],
                            ['BDF',result.data_stock['BDF']],
                            ['BP',result.data_stock['BP']],
                            ['BPF',result.data_stock['BPF']],
                            ['AD',result.data_stock['AD']],
                            ['ADF',result.data_stock['ADF']],
                            ['AP',result.data_stock['AP']],
                            ['APF',result.data_stock['APF']],
                            ['SB',result.data_stock['SB']],
                            ['SRW',result.data_stock['SRW']], false
                            );
                });
        });
});

这是我的系列高潮：

var chart = Highcharts.chart('reportChart', {
    chart: {
      type: 'column'
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    series: [{
      name: 'STOCK',
      color: "#2a82ff",
      data: [],
      dataLabels: {
        enabled: true,
        color: '#045396',
        align: 'center',
        formatter: function() {
              return Highcharts.numberFormat(this.y, 0);
              },
        y: 0,
        style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif',
        position: 'relative'
       }
     }
    },
    {
      name: 'SALES',
      color: "teal",
      data: []
    }]
}

这是我的控制器

function charts_day(){
$n_id_resto= json_decode($this->input->post('p_id_resto'));<br/>
$start_date= json_decode($this->input->post('start_date'));<br/>
$end_date= json_decode($this->input->post('end_date'));<br/>
$data1['data_sales'] = $this->Model_All->getSumSales($n_id_resto, $start_date, $end_date);<br/>
$data2['data_stock'] = $this->Model_All->charts_stokCbg($n_id_resto,$start_date, $end_date);<br/>
$dataMerge = array_merge($data1, $data2);$this->output->set_content_type('application/json')->set_output(json_encode($dataMerge),JSON_NUMERIC_CHECK);
}

数据仍未在高图中正确显示。

Answer 1

我确定使用上面的评论

$this->output->set_content_type('application/json')->set_out‌put(json_encode($dat‌aMerge,JSON_NURIC_‌CMEHECK));

你会得到

Object { BD: 8, BDF: 10, BP: 10, BPF: 10, AD: 10, ADF: 10, AP: 10, APF: 10, SB: 10, SRW: 10 }

现在你必须按照highcharts的要求处理数据

var data={ BD: "8", BDF: "10", BP: "10", BPF: "10", AD: "10", ADF: "10", AP: "10", APF: "10", SB: "10", SRW: "10" }
var series_data=[]; //creating empty array for highcharts series data
Object.keys(data).map(function(item, key) {
  series_data.push({name:item,y:Number(data[item])}) ; //Number(data[item]) converts string to number.Not required if already done using JSON_NUMERIC‌_CHECK
});
console.log(series_data);// check how data is formed. you can do same in php by creating object array in php

Fiddle演示

使用Ajax和CodeIgniter的setData Series Highchart

1 个答案: