更改壓縮圓圖中特定圓的顏色（amcharts）

Question

我們如何更改 amcharts 中用於填充圓形圖表的顏色？ 我們可以設置主題，但我要做的是覆蓋我可以在 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

您可以使用屬性字段map 將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>