1

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

我的 pb 是为图表创建有效系列。我必须从 mysql DB 创建 6 个系列。我的图表代码 在使用 jquery 调用 json arrary 时受到空白页 highchart 的启发。

我的视图（<?=$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 是从查询结果开始到图表系列格式。一个例子可能是很好的答案。

我希望你能在我发疯之前帮助我！

4

1 回答 1

0

您的设置的第一个问题是每个系列的数据都是一个包含数组的字符串。目前它看起来像：

{ 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"},
于 2013-02-07T08:52:12.850 回答