javascript - JSON、Codeigniter、Highcharts 和 AJAX

Question

我正在使用 CI (+HMVC) 在表单上显示带有 ajax 事件的 Highcharts。

我的 pb 是为图表创建有效系列。我必须从 mysql DB 创建 6 系列。我的图表代码的灵感来自 blank page highchart in using jquery to call json arrary .

我的观点 ( <?=$instance_graph?> 无处不在，因为我希望能够实例化多个图表)

$(document).ready(function() {
    $('#submit<?=$instance_graph?>').click(function() {
        $('#rendu_graph<?=$instance_graph?>').html('');
        var form_data = {
        from : $('#from[name=from<?=$instance_graph?>]').val(),
        to : $('#to[name=to<?=$instance_graph?>]').val(),
        parametre : $('#parametre[name=parametres<?=$instance_graph?>]').val(),
        ajax : '1'
        };
        $.ajax({
            url: "<?= site_url('graph_meteo/ajax_graph'); ?>",
            type: 'POST',
            async : false,
            data: form_data,
            dataType:'json',
            success: function(data) {
            //alert(msg) ;
            //$('#rendu_graph<?=$instance_graph?>').html(msg);
            var chartSeriesData=[];
            $.each(data, function(i,item){
                var series_name = item.name;
                var series_data = item.data;     
                var series = {data: item.data,name:series_name};
                chartSeriesData.push(series);
            });
            console.log(chartSeriesData) ;
            chart = new Highcharts.Chart({ //Début du Highchar
            chart: {
                renderTo: 'rendu_graph<?=$instance_graph?>',
                type: 'spline'
            },
            title: {
                text: 'Graph' 
            },
            subtitle: {
                text: 'Title'
            },
            xAxis: {
                type: 'datetime'

            },
            yAxis: {
                title: {
                    text: 'param 1'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%a %d %b %H:%M', this.x) + ': ' + this.y + ' m';
                }
            },

            series: chartSeriesData


        })

创建的系列的console.log:

[Object { data="[Date.UTC(2013,02,06,14,15),65.09375]",  name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,15),65.09375]",  name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,15),65.09375]",  name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,30),63.425]",  name="Station 1"}.

当然，我为每个没有情节的对象都有一个系列:

编辑:我正在寻找一种方法来使用这些数据(1行)制作一个漂亮的工作图表，并且我希望我的代码适用于许多行/系列。我的大PB是从查询结果开始到图表系列格式。一个例子可能是很好的答案。

希望你能在我生气之前帮助我!

Answer 1

您的设置的第一个问题是每个系列的数据都是一个带有数组的字符串。目前看起来像:

{ data: "[Date.UTC(2013,02,06,14,15),65.09375]",  name: "Station 1"}

名称看起来不错，但数据应该是真正的 JavaScript 数组，而不是字符串。这就是您想要的样子:

{ data: [Date.UTC(2013,02,06,14,15),65.09375],  name: "Station 1"}

当这个问题解决后，我认为你应该将所有数据点放在同一个系列定义中。所以代替:

{ data: [Date.UTC(2013,02,06,14,15),65.09375],  name: "Station 1"},
{ data: [Date.UTC(2013,02,07,14,15),67.09375],  name: "Station 1"}

你应该有一个包含很多点的系列:

{ data: [
      [Date.UTC(2013,02,06,14,15),65.09375],
      [Date.UTC(2013,02,07,14,15),67.09375],
      <more data points here>],
  name="Station 1"},