【发布时间】:2015-12-18 14:00:39
【问题描述】:
使用渲染良好的 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,准确地表达了我的意思。
【问题讨论】:
-
你能在 JSFiddle 中重现你的问题吗?您发布的那个工作正常,我无法重现该问题。浏览器控制台(开发者工具)是否有错误?
-
另一方面,如果你有一个饼图有这么多切片,以至于图例需要分页(考虑到即使是一个结构良好的饼图也存在固有的失败),你期望用户有什么价值可以可能从这样的图表中得到吗?
-
@jlbriggs 这是我经理的要求 - 我只是提供他的要求:)
-
@KacperMadej 我现在就去做。
-
@KacperMadej 忘了说开发者工具没有错误。
标签: javascript html highcharts pie-chart