1

フォームにajaxイベントを含むHighchartsを表示するためにCI（+ HMVC）を使用しています。

私のpbは、チャートの有効なシリーズを作成することです。mysqlDBから6シリーズを作成する必要があります。私のチャートコードは 、jqueryを使用してjsonarraryを呼び出す際の空白ページの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つのシリーズがあります。

ここに画像の説明を入力してください

編集：私はこれらのデータ（1行）でうまく機能するグラフを作成する方法を探しています。コードを多くの行/シリーズで機能させたいです。私の大きな目標は、クエリ結果からチャートシリーズ形式までを開始することです。例は良い答えかもしれません。

私が怒る前にあなたが私を助けてくれることを願っています！

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"}

多くのポイントを持つ 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 に答える