目前,在Highcharts中启用旭日形图的图例时,可以在图例中看到单个系列标签。请参阅以下JSFiddle:http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts饼图图例显示图例中的所有类别标签。请参阅下面的饼图图例:http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
是否可以显示森伯斯特系列的所有数据点或至少类别 - 消费者,企业,家庭办公室,传奇中的小企业?
答案 0 :(得分:1)
在我看来,答案是不。
请参阅此演示:http://jsfiddle.net/kkulig/u3p1usz9/
我尝试通过设置@Html.Raw(Model.Icon)
(在API中没有文档,但它有效)和覆盖legendType = 'point'
来实现此功能,但似乎sunburst不支持隐藏点。没有方法可以做到 - 查看H.Legend.prototype.getAllItems
输出。使用console.log
属性切换点的可见性也不起作用。图例表现正常,但对绘图区域没有影响。
解决方法强>
这个简单的例子展示了如何模仿所需的图例行为:http://jsfiddle.net/kkulig/kn10kb7L/
首先,我添加了另外两个没有数据的系列:
visible
需要通过设置“假”系列的颜色手动处理图例项目标记的颜色。
我为每个叶子创建了{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
标志以控制其可见性。
然后我使用他们的visible
回调函数来过滤整个数据集,并使用过滤后的数据对第一个系列执行legendItemClick
。
setData
API参考: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
如果你认为隐藏点应该在sunburst系列中实现,你可以在这里分享这个想法:https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
<强>更新强>
如果您想要动画,请使用 legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
和addPoint
代替removePoint
。
API参考: