设置Highcharts系列和类别的数据动态

Question

我试着用下面的代码

$j(document).ready(function() { 
    $j("#filter").click(function() { 
     BuildReport(); 
    }); 

    $j("#container").highcharts({ 
     chart: { 
      type: 'column', 
      marginRight: 130, 
      marginBottom: 100 
     }, 
     title: { 
      text: 'SEs open by Group', 
      x: -20 //center 
     }, 
     yAxis: { 
      title: { 
       text: '' 
      }, 
      min: 0, 
      allowDecimals: false 
     }, 
     xAxis: {}, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
          this.series.name + ': ' + this.y + '<br/>' + 
          'Total: ' + this.point.stackTotal; 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       cursor: 'pointer', 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: {} 
    }); 

    BuildReport(); 
}); 

function SetChartSeries(series) { 
    debugger; 
    chart = $j("#container").highcharts(); 
    chart.xAxis[0].setCategories(getReportCategories(series)); 
    chart.series = $j.map(series, function (item) { 
     return { 
      name: item.Name, 
      color: item.Colour, 
      data: $j.map(item.Items, function (list) { 
       return { 
        name: list.Category, 
        y: list.Value, 
        id: list.ID 
       }; 
      }) 
     }; 
    }); 
} 

function getReportCategories(data) { 
    var catArray = []; 
    $j.each(data, function (index, value) { 
     $j.each(value.Items, function (index, value) { 
      if ($j.inArray(value.Category, catArray)) { 
       catArray.push(value.Category); 
      } 
     }); 
    }); 

    return catArray; 
} 

function BuildReport() { 
    $j.ajax({ 
     url: "ChartDataHandler.ashx", 
     dataType: "json", 
     cache: false, 
     success: function (data) { 
      SetChartSeries(data.Series); 
     } 
    }); 
} 

页面加载或过滤器按钮被点击BuildReport调用处理程序，并通过了一系列数据来更新通过Ajax调用图表SetChartSeries。从这里我可以看到图表属性已设置，但图表从未绘制。我做了什么明显错误？

Answer 1

如果你想创造新的系列，你需要使用Chart.addSeries()方法

如果你想在你需要使用Series.setData() 方法现有系列设置新的数据。

依我之见，你为每个请求创建新的系列，如果你想动态设置类别数据使用addSeries方法

Answer 2

，你需要使用Axis.update（）方法

chart.xAxis[0].update({categories:arrayname,tickInterval:20},true); 

Answer 3

的以下是我所做的动态更新系列。默认行为将重绘图表。检查https://api.highcharts.com/class-reference/Highcharts.Chart#update

$('#YourContainer').highcharts().update({ 
    series:[{ 
     name: 'New Legend', 
     data: [{ 
      name: 'New Category', 
      y: data 
     }] 
    ]} 
})