使用Highcharts创建一些饼图,渲染效果很好,但图例不会在页面之间交换。它会更新页码(例如,1/4 - > 2/4 - > 3/4),但图例的内容不会改变。
我使用了http://jsfiddle.net/qegmnsm7/中的代码,只是将自己的数据传递给它;提供此代码:
var areaOptions = {
chart: {
renderTo: 'areaPie',
defaultSeriesType: 'pie',
width: 900,
height: 600
},
title: {
text: "Test Pie Chart."
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
exporting: {
buttons: {
printButton: {
enabled: false
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return Math.round(this.percentage) + '% (' + this.y + ')';
}
},
showInLegend: true
, point: {
events: {
legendItemClick: function () {
filterList(this);
this.select();
return false;
},
click: function () { filterList(this); }
}
}
},
series: [{
type: 'pie',
name: 'Banana',
data: []
}]
}
};
areaOptions.series = @Html.Raw(ViewBag.Area);
var areaChart = new Highcharts.Chart(areaOptions);
areaChart.render();
然而,点击“向下”后面的'箭头,图例保持完全相同 - 除了1/2更改为2/2。
我在我的应用程序中使用了上面链接的示例代码,它运行良好;因此,我希望只是更新数据输入才能工作。然而,有些东西搞砸了,我无法找到任何其他用户'问题或谷歌链接提供帮助。
我做错了什么阻止传奇正确分页?
编辑:Here是一个JSFiddle,显示我的意思。
答案 0 :(得分:1)
areaChart.render();
不是官方API的一部分,导致图例分页问题。删除这部分代码将解决您的问题。
修正了JSFiddle中的代码:https://jsfiddle.net/kfdoxscx/9/