Highcharts:是否可以显示类似于饼图图例的森伯斯特图例? [英] Highcharts: Is it possible to show Sunburst legend similar to Pie chart legend?

问题描述

当前，在Highcharts中启用旭日形图的图例时，在图例中会显示单个系列标签.请参考以下JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/

Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/

Highcharts饼图图例显示图例中的所有类别标签.请参考以下饼图图例: http://jsfiddle.net/amrutaJgtp/wgaak302/

Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: 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
}]
}]

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

Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?

推荐答案

在我看来，答案是否.

请参阅此演示: http://jsfiddle.net/kkulig/u3p1usz9/

我试图通过设置legendType = 'point'(在API中没有记录文件，但可以使用)并覆盖H.Legend.prototype.getAllItems来实现此功能，但是似乎旭日不支持隐藏点.没有任何方法可以执行此操作-检出console.log输出.使用visible属性切换点的可见性也不起作用.图例的行为正常，但是对绘图区域没有影响.

I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.

解决方法

这个简单的示例显示了如何模仿所需的图例行为: http://jsfiddle.net/kkulig/kn10kb7L/

This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/

首先，我添加了另外两个没有数据的系列:

First I added additional two series that have no data:

{
  type: 'line',
  name: 'p1',
  color: 'blue'
}, {
  type: 'line',
  name: 'p2',
  color: 'blue'
}

图例项标记的颜色需要通过设置假"系列的颜色来手动处理. 我为每个叶子创建了visible标志，以控制其可见性. 然后，我使用他们的legendItemClick回调函数来过滤完整的数据集，并使用过滤后的数据在第一个系列中执行setData.

The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series. I created visible flag for every leaf for controlling its visibility. Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.

    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

如果您认为应该在旭日系列中实现隐藏点，则可以在此处分享此想法:

If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api

更新

如果您希望动画发生，请使用addPoint和removePoint而不是setData.

If you want an animation to happen use addPoint and removePoint instead of setData.

API参考:

• https://api.highcharts.com/class-reference/Highcharts .Series#addPoint
• https://api.highcharts.com/class-reference/Highcharts .Series#removePoint

• https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
• https://api.highcharts.com/class-reference/Highcharts.Series#removePoint

这篇关于Highcharts:是否可以显示类似于饼图图例的森伯斯特图例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！