如何将动态值放在Highchart.js数据中?

时间:2013-12-26 00:48:43

标签: javascript php jquery codeigniter highcharts

我正在使用codeigniter,我使用下面的代码根据下拉框中的选择查询动态值。

$("#month").change(function(){
    $.ajax({
        type : 'post',
        data : 'month='+ $(this).val() + '&year='+$('#year').val(),
        url : '<?php echo base_url()."index.php/suggestion/processReportBreakdown";?>',
        success : function(data){
            $('#section').html(data); //<---- i need to print html data
        }
    });
});

$("#year").change(function(){
    $.ajax({
        type : 'post',
        data : 'month='+ $(this).val() + '&year='+$('#year').val(),
        url : '<?php echo base_url()."index.php/suggestion/processReportBreakdown";?>',
        success : function(data){
            $('#section').html(data);
        }
    });
});

processReportBreakdown()是这样的:

public function processReportBreakdown()
{
    $month              = $this->input->post('month');
    $year               = $this->input->post('year');
    $data['query']  =   $this->suggestion->breakDownReport($month, $year);

    $data['totalBreakdown'] = $this->suggestion->getAllRowsBreakDownReport($month, $year);
    $total = $data['totalBreakdown']-1;

    $i = 0;

    foreach($data['query'] as $row)
    {

        if($i != $total)
        {
            echo "'".$row->countReport."',";
        }
        else
        {
            echo "'".$row->countReport."'";
        }

        $i++;

    }

}

现在我想获得ajax POST的响应并将其打印在highchart数据中......这样每次下拉列表更改时,图表也会根据ajax POST传递的值而更改。这样做的正确方法是什么?

2 个答案:

答案 0 :(得分:1)

highcharts.com上有很多可用的例子

只需查看此链接Live Server

即可

对于java脚本,您将完全使用它,您也可以考虑这个答案 Live Multiple Series

答案 1 :(得分:0)

这是一个直接来自creating highchart with ajax json data的例子我看到你无法弄清楚如何在ajax中使用高图

function visitorData (data) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Average Visitors'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Number of visitors'
        }
    },
    series: data,
  });
}
$(document).ready(function() {
 $.ajax({
    url: '/visitdata',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
        visitorData(data);
    }
  });
 });

示例php codeigniter代码,以便在http://ellislab.com/codeigniter%20/user-guide/libraries/output.html

返回更多json输出
$this->output
    ->set_content_type('application/json')
    ->set_output(json_encode(array('foo' => 'bar')));

我不知道这段代码的目的是什么

foreach($data['query'] as $row)
{

    if($i != $total)
    {
        echo "'".$row->countReport."',";
    }
    else
    {
        echo "'".$row->countReport."'";
    }

    $i++;

}

你在这里回显输出是html所以收集所有数据并将其输出为json