設置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 
     }] 
    ]} 
})