Highcharts：是否可以绘制没有数据值的旭日图？答案

【问题标题】：Highcharts: Is it possible to plot sunburst chart with no data values?Highcharts：是否可以绘制没有数据值的旭日图？
【发布时间】：2017-10-16 11:43:25
【问题描述】：

我想绘制对称的多层饼图。参考组织层次示例：Here

我尝试了以下http://jsfiddle.net/amrutaJgtp/7r8eb5ms/7/

series: [{
type: "sunburst",
data: [{
  id: '0.0'
}, {
  id: '1.0',
  parent: '0.0',
  name: 'Consumer',
  color: colors[1]
}, {
  parent: '1.0',
  name: 'Furniture',
  value: 1
}, {
  parent: '1.0',
  name: 'Office Supplies',
  value: 1
}, {
  parent: '1.0',
  name: 'Technology',
  value: 1
}, {
  id: '2.0',
  name: 'Corporate',
  parent: '0.0',
  color: colors[2]
}, {
  parent: '2.0',
  name: 'Furniture',
  value: 1
}, {
  parent: '2.0',
  name: 'Office Supplies',
  value: 1
}, {
  parent: '2.0',
  name: 'Technology',
  value: 1
}, {
  id: '3.0',
  name: 'Home office',
  parent: '0.0',
  color: colors[3]
}, {
  parent: '3.0',
  name: 'Furniture',
  value: 1
}, {
  parent: '3.0',
  name: 'Office Supplies',
  value: 1
}, {
  parent: '3.0',
  name: 'Technology',
  value: 1
}, {
  id: '4.0',
  name: 'Small Business',
  parent: '0.0',
  color: colors[4]
}, {
  parent: '4.0',
  name: 'Office Supplies'
}, {
  parent: '4.0',
  name: 'Technology'
}],

注意没有看到“小型企业”类别。

当我没有定义任何数据值时，不会绘制旭日图。我希望所有类别的大小都是对称的。

有没有办法使用Highcharts旭日图实现对称的多层饼图？

【问题讨论】：

@ewolden 设置值：1 不显示所有对称。 JS 小提琴：jsfiddle.net/amrutaJgtp/7r8eb5ms/8 这里的小企业有比较小的部分，我希望 4 个部分是对称的，每个部分有 25% 的面积。请参阅组织层次结构示例，当数据仅包含类别时，我想实现类似的对称部分。设置相同的值只是我尝试过的一种方式。实际上，我想用对称部分绘制旭日形图，仅显示没有任何数值度量的级别层次结构。
@ewolden 是的，您的前 2 个 JS 小提琴正确地显示了旭日形图中的对称部分。不过这里jsfiddle.net/7r8eb5ms/11，“小企业”的部分还是比较小的。
我也不确定当类别的子节点数量不同时它将如何工作。目前在示例中，假设所有类别都具有 3 个子节点，因此您为具有 2 个节点的“小型企业”类别添加了一个名称为空的节点。概括地说，这是否意味着我需要从所有类别中找到最大数量的子节点，并相应地在需要的地方添加类别节点？
@ewolden 好的，是的。这就是我一直在寻找的。子节点不会是对称的，因为它们的数量可能会有所不同。但是所有的部分都是均匀分布的，并且彼此之间是对称的。非常感谢！
如果你想让第一层的节点相等，它们的子节点的值总和必须相等。例如，Consumer 节点有三个孩子，每个孩子的值为 1，因此有两个孩子的 Small Business 的值必须为 3（例如，每个孩子的值必须等于 1.5）。示例：jsfiddle.net/cs8tag94.

标签： javascript charts highcharts

【解决方案1】：

根据需要有多种选择。这里有四个可能的选项，以及它们对应的小提琴：

Fiddle 1：

Fiddle 2：

Fiddle 3：

Fiddle 4：

其中 3 个每个点都有一个附加参数：

tooltipIncluded: false

使用此格式化程序控制工具提示：

tooltip: {
  formatter: function() {
    if (this.point.tooltipIncluded) {
      return 'The population of <b>' + this.point.name + '</b> is <b>' + this.point.value + '</b>';
    } else {
      return false;
    }
  }
}

【讨论】：

谢谢@ewolden