Amchart v4的嵌套饼中的包装盒是否可以使用其他颜色？

Question

我使用嵌套的饼图来显示层次结构数据，我希望能够按框显示特定颜色

例如此处： 假设我只想将此框的颜色从黄色更改为灰色。

您可以在这里进行测试：https://jsfiddle.net/aliz/gwz7om9e/

javascript代码：

items.append([item_nr_element.text for item_nr_element in node.getchildren()])

我找到了以下示例：https://codepen.io/team/amcharts/pen/PQrvJr 您可以在其中看到“荷兰”在2个级别之间的颜色不同，但是javascript代码中没有特定的内容...

您知道是否有可能？

Answer 1

  

我发现了以下示例：https://codepen.io/team/amcharts/pen/PQrvJr，在这里您可以看到“荷兰”在两个级别之间具有不同的颜色，但是javascript代码中没有特定的内容...

正在发生的事情是：

pieSeries.colors.step = 2;

step property of a ColorSet使它跳过其列表中的颜色（在这种情况下，是自动生成的）。如果将外部系列的每个第二种颜色与内部系列的每种颜色进行比较，就会发现它们是重合的。

对于给特定的切片着色，有不同的处理方法。

现在，这就是Pie系列获得其颜色的方式：

// Earlier in code
var colorSet = new am4core.ColorSet();
colorSet.list = ["#18dc08", "#e2ed0c", "#3be791", "#0eade6", "#8f55e9", "#dd0a4b"].map(function(color) {
    return new am4core.color(color);
});

// createPie() ...
pieSeries.colors = colorSet;

如果您确切地知道要更改哪个系列中的哪个切片，则可以提供一个新的ColorSet，其列表类似但针对该切片进行了调整，例如：

if (chart.series.length === 3) {
    var distinctColors = new am4core.ColorSet();
  distinctColors.list = colorSet.list.map(function(color, index) {
    if (index === 1) {
      return am4core.color("gray");
    }
    return color;
  });
  pieSeries.colors = distinctColors;
} else {
  pieSeries.colors = colorSet;
}

不过，理想情况下，您将使用an adapter，因此每当要应用fill时，您都可以提供逻辑来确定要提供的颜色，例如为Sector1：categor3着色为黑色（由于代码中的其他内容，因此为半透明）：

pieSeries.slices.template.adapter.add("fill", function(fill, target) {
  if (target.dataItem.dataContext && target.dataItem.dataContext.name === "Sector1" &&  targetAttribute === "category3") {
    return am4core.color("black");
  }
  return fill;
});

这是一个演示（我还用"over"的适配器替换了您的tooltipHTML事件代码）：

https://jsfiddle.net/notacouch/v26zdncy/