我尝试使用以下代码通过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);
}
});
}
当页面加载或单击过滤器按钮时,BuildReport会调用处理程序并将系列数据传递给SetChartSeries。从这里我可以看到图表属性已设置,但从未绘制图表。我做了一件明显不对的事吗?
答案 0 :(得分:1)
如果要创建新系列,则需要使用Chart.addSeries()方法
如果要在现有系列中设置新数据,则需要使用Series.setData() 方法
如我所见,您为每个请求创建了新系列,并使用addSeries
方法
答案 1 :(得分:0)
如果要动态设置类别数据,则需要使用Axis.update()方法
chart.xAxis[0].update({categories:arrayname,tickInterval:20},true);
答案 2 :(得分:0)
以下是我动态更新系列的方法。默认行为将重绘图表。查看https://api.highcharts.com/class-reference/Highcharts.Chart#update
$('#YourContainer').highcharts().update( {
series:[{
name: 'New Legend',
data: [{
name: 'New Category',
y: data
}]
]}
})