更改实心圆图中特定圆的颜色（图表）

Question

我们如何更改填充圆图在弹药中使用的颜色？我们可以设置主题，但是我想做的是覆盖可以在JSON中定义的特定圆圈的颜色。知道我们该怎么做吗？

他们在此处使用示例https://codepen.io/team/amcharts/pen/mgEXeq，假设我要将标题为“第四”的圆圈的颜色更改为绿色。我添加了颜色属性，但是它不起作用

{
        name: "Fourth",
        color: "green",
        children: [
          { name: "D1", value: 415 },
          { name: "D2", value: 148 },
          { name: "D3", value: 89 }
        ]
      }

Answer 1

您可以使用property field将stroke和fill属性映射到数据的color字段。在力导向节点图中，您需要在节点的circle和outerCircle对象上定义以下属性：

series.nodes.template.outerCircle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.fill = "color";

请注意，您的示例只会将父节点设置为绿色。如果还希望将每个子节点设置为绿色，则需要设置颜色。

下面的演示：

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

chart.data = [
  {
    name: "Core",
    children: [
      {
        name: "First",
        children: [
          { name: "A1", value: 100 },
          { name: "A2", value: 60 }
        ]
      },
      {
        name: "Second",
        children: [
          { name: "B1", value: 135 },
          { name: "B2", value: 98 }
        ]
      },
      {
        name: "Third",
        children: [
          {
            name: "C1",
            children: [
              { name: "EE1", value: 130 },
              { name: "EE2", value: 87 },
              { name: "EE3", value: 55 }
            ]
          },
          { name: "C2", value: 148 },
          {
            name: "C3", children: [
              { name: "CC1", value: 53 },
              { name: "CC2", value: 30 }
            ]
          },
          { name: "C4", value: 26 }
        ]
      },
      {
        name: "Fourth",
        color: "green",
        children: [
          { name: "D1", value: 415 },
          { name: "D2", value: 148 },
          { name: "D3", value: 89 }
        ]
      },
      {
        name: "Fifth",
        children: [
          {
            name: "E1",
            children: [
              { name: "EE1", value: 33 },
              { name: "EE2", value: 40 },
              { name: "EE3", value: 89 }
            ]
          },
          {
            name: "E2",
            value: 148
          }
        ]
      }

    ]
  }
];

series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.children = "children";
series.nodes.template.tooltipText = "{name}:{value}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.outerCircle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.stroke = "color";
series.nodes.template.circle.propertyFields.fill = "color";

series.nodes.template.label.text = "{name}"
series.fontSize = 10;
series.minRadius = 15;

#chartdiv {
  width: 100%;
  height: 600px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>