0

ハイチャートに取り組んでいます。動的に読み込んでいるカテゴリ データとシリーズ データが表示されないという問題に遭遇しました。これが私のコードです。

    function loadChart() {              
        var categories = [];    
        var trend_series = [];
        $.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {
            $.each( data, function( key, val ) {
            categories.push( key );
            trend_series.push( parseFloat( val ) );
            });
            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });

        $( function () {
        var chart = new Highcharts.Chart({
           chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: {}
           },

               series: [{
              data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
           }]
             });

             chart.xAxis[0].setCategories( categories );
            chart.addSeries({
            name: 'App Summary',
            data:  trend_series       
            });
         });
        }

loadChart()別のファイルから呼び出しています。

カテゴリとトレンドシリーズ (これらは配列です) がハイチャート関数内で空であることに気付いた主な問題の 1 つです。ただし、ajax 関数呼び出し内では空ではありません。これらの値をハイチャート関数に渡すにはどうすればよいですか、またはこれを達成するための他の方法はありますか?

4

3 に答える 3

0

使えばもっと良くなる

$.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {

var options = {
   chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: []
           },
    series:{
data:[]
}

}

            $.each( data, function( key, val ) {
            options.xAxis.categories.push(key);
            options.series.data.push( parseFloat( val ) );
});

var chart = new Highcharts.Chart(options);

            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });
于 2013-07-17T11:10:50.317 に答える
0

少し奇妙ですが、私はこの解決策に行き着きます。

enitre highchart 関数を別の関数に移動しました。ajax 成功関数では、次の関数を呼び出していますrenderChart()。コードは次のとおりです。

function loadChart() {              
      categories = [];    
      trend_series = [];

        $.ajax({
            type:'POST',
        url : '/trends.php',
        dataType: 'json',
        async : 'false',
            data: { date: d, item_name: item },
        success: function( data ) {
            $.each( data, function( key, val ) {
            categories.push( key );
            trend_series.push( parseFloat( val ) );
            });
            renderChart(categories,trend_series);
            },
        error: function( data ) {               
            //alert(data['responseText']);
        }
        });
        }

ハイチャートを読み込むには

      function renderChart(categories,trend_series){
        var chart = new Highcharts.Chart({
           chart: {
              renderTo: 'container',
              type: 'line'                    
               },                           
           xAxis: {
              categories: {}
           },

               series: {}
           }]
             });

             chart.xAxis[0].setCategories( categories );
            chart.addSeries({
            name: 'App Summary',
            data:  trend_series       
           });   
  }
于 2013-07-17T09:51:19.717 に答える
0

カテゴリとデータを変更していますが、グラフにはそのことを通知する方法がありません。ajax 呼び出しの成功関数で、 categories.push() を実行chart.xAxis[0].setCategories(categories,true)してから、データと同じようにやり直す必要があります。chart.series[0].setData(trend_series,true)オプションはtruechart.redraw() をトリガーします

于 2013-07-17T08:50:11.753 に答える