目前,在海图中启用太阳暴晒图的图例时,在图例中可以看到单个系列标签。请参阅以下JSFiddle:http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
高图表饼形图图例显示图例中的所有类别标签。参考以下派图图例: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
}]
}]
是否有可能显示太阳暴晒系列的所有数据点,或至少是类别-消费者,企业,家庭办公室,小企业的传奇?
发布于 2017-10-18 14:15:51
在我看来,答案是no。
请参阅本演示:http://jsfiddle.net/kkulig/u3p1usz9/
我试图通过设置legendType = 'point'
(在API中没有文档化,但它有效)和覆盖H.Legend.prototype.getAllItems
来实现这个功能,但是似乎阳光暴晒不支持隐藏点。没有任何方法可以做到这一点--查看console.log
输出。使用visible
属性切换点的可见性也不起作用。传说行为正常,但对情节区域没有影响。
解决方案
这个简单的例子展示了如何模仿所需的图例行为:http://jsfiddle.net/kkulig/kn10kb7L/
首先,我添加了另外两个没有数据的系列:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
图例项目标记的颜色需要通过设置“假”系列的颜色来手动处理。我为每个叶子创建了visible
标志,以控制其可见性。然后,我使用他们的legendItemClick
回调函数过滤完整的数据集,并在第一个系列中使用过滤后的数据执行setData
。
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));
}
API参考: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
如果您认为隐藏点应该在sunburst系列中实现,那么您可以在这里分享这样的想法:https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
更新
如果您希望动画发生,请使用addPoint
和removePoint
而不是setData
。
API引用:
https://stackoverflow.com/questions/46788355
复制相似问题