Highcharts:是否有可能展示类似于饼图传奇的Sunburst传奇?

时间:2017-10-17 10:50:16

标签: javascript jquery charts highcharts

目前,在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
}]
}]

是否可以显示森伯斯特系列的所有数据点或至少类别 - 消费者,企业,家庭办公室,传奇中的小企业?

1 个答案:

答案 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参考: