jQuery 动态设置 Highcharts 系列和类别数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16218189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting Highcharts Series and Category data dynamically
提问by Stewart Alan
Im trying to update a chart via an AJAX call using the following code
我尝试使用以下代码通过 AJAX 调用更新图表
$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);
}
});
}
When the page loads or the filter button is clicked BuildReport calls the handler and passes the series data to SetChartSeries. From here I can see that the chart properties are set, but the chart is never drawn. Am I doing something obviously wrong?
当页面加载或过滤器按钮被单击时，BuildReport 调用处理程序并将系列数据传递给 SetChartSeries。从这里我可以看到图表属性已设置，但从未绘制图表。我做错了什么吗？
回答by Cihad Turhan
If you want to create new series you need to use Chart.addSeries()method
如果要创建新系列，则需要使用Chart.addSeries()方法
If you want to set new data in an existing series you need to use Series.setData()method.
如果要在现有系列中设置新数据，则需要使用Series.setData()方法。
As I see, you create new series for each request and use addSeriesmethod
如我所见，您为每个请求和使用addSeries方法创建新系列
回答by Swetha
If you want to set category data dynamically, you need to use Axis.update() method
如果要动态设置分类数据，需要使用Axis.update()方法
chart.xAxis[0].update({categories:arrayname,tickInterval:20},true);
回答by Edison Chang
The following is what I did to dynamically update series. The default behavior will redraw the chart. Check https://api.highcharts.com/class-reference/Highcharts.Chart#update
以下是我为动态更新系列所做的工作。默认行为将重绘图表。检查https://api.highcharts.com/class-reference/Highcharts.Chart#update
$('#YourContainer').highcharts().update( {
series:[{
name: 'New Legend',
data: [{
name: 'New Category',
y: data
}]
]}
})
