Question

我正在从事高图。我遇到了一个问题，即我动态加载的类别数据和系列数据没有显示出来。这是我的代码。

    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()。

我注意到的一个主要问题是类别和trend_series（这些是数组）在highchart函数中是空的。但是在ajax函数调用中它不是空的。如何将这些值传递给highchart函数，或者是否有其他方法可以实现此目的。

Answer 1

您正在修改类别和数据，但图表无法获得通知。您需要再次执行categories.push（）然后再重做chart.xAxis[0].setCategories(categories,true)，并且与ajax调用中的成功函数中的数据chart.series[0].setData(trend_series,true)相同。 true选项会触发chart.redraw（）

Answer 2

我最终得到了这个解决方案，即使它有点奇怪，

我将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']);
        }
        });
        }

加载highchart

      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       
           });   
  }

Answer 3

如果使用

会更好

$.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']);
        }
        });

Highcharts系列和类别不是从ajax请求动态添加的

3 个答案: