更改 amCharts 饼图切片的颜色答案

【问题标题】：Change the colors of slices of amCharts pie chart更改 amCharts 饼图切片的颜色
【发布时间】：2021-06-28 09:53:19
【问题描述】：

这是图表数据：

am4core.ready(function() {

am4core.useTheme(am4themes_animated);

var chart = am4core.create("cards-chart", am4charts.PieChart);

// Add data
chart.data = [{
  "cardColor": "white",
  "count": 501.9,
  "color": "red"
}, {
  "cardColor": "red",
  "count": 301.9,
  "color": "red"
}, {
  "cardColor": "orange",
  "count": 201.1,
  "color": "orange"
}, {
  "cardColor": "green",
  "count": 165.8,
  "color": "green"
}, {
  "cardColor": "blue",
  "count": 139.9,
  "color": "blue"
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "count";
pieSeries.dataFields.category = "cardColor";
pieSeries.innerRadius = am4core.percent(70);
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;

// This is not working and produces an error
// pieSeries.slices.template.adapter.add("fill", function (fill, target) {
//     return target.dataItem.dataContext["color"];
// });


var rgm = new am4core.RadialGradientModifier();
rgm.brightnesses.push(-0.8, -0.8, -0.5, 0, -0.5);
pieSeries.slices.template.fillModifier = rgm;
pieSeries.slices.template.strokeModifier = rgm;
pieSeries.slices.template.strokeOpacity = 0.4;
pieSeries.slices.template.strokeWidth = 0;


}); // end am4core.ready()

#cards-chart {
  width: 100%;
  height: 700px;
  position: absolute;
  top: 15%;
  z-index: 13;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="cards-chart"></div>

我使用这行代码来更改切片的颜色，但它给了我一个错误：

pieSeries.slices.template.adapter.add("fill", function (fill, target) {
     return target.dataItem.dataContext["color"];
});

如何正确更改颜色？

【问题讨论】：

标签： javascript html amcharts

【解决方案1】：

您可以使用propertyFields 将您的color 值映射到切片的fill 属性：

pieSeries.slices.template.propertyFields.fill = "color";

示例如下：

am4core.ready(function() {

am4core.useTheme(am4themes_animated);

var chart = am4core.create("cards-chart", am4charts.PieChart);

// Add data
chart.data = [{
  "cardColor": "white",
  "count": 501.9,
  "color": "red"
}, {
  "cardColor": "red",
  "count": 301.9,
  "color": "red"
}, {
  "cardColor": "orange",
  "count": 201.1,
  "color": "orange"
}, {
  "cardColor": "green",
  "count": 165.8,
  "color": "green"
}, {
  "cardColor": "blue",
  "count": 139.9,
  "color": "blue"
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "count";
pieSeries.dataFields.category = "cardColor";
pieSeries.innerRadius = am4core.percent(70);
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;

// This is not working and produces an error
// pieSeries.slices.template.adapter.add("fill", function (fill, target) {
//     return target.dataItem.dataContext["color"];
// });


var rgm = new am4core.RadialGradientModifier();
rgm.brightnesses.push(-0.8, -0.8, -0.5, 0, -0.5);
pieSeries.slices.template.fillModifier = rgm;
pieSeries.slices.template.strokeModifier = rgm;
pieSeries.slices.template.strokeOpacity = 0.4;
pieSeries.slices.template.strokeWidth = 0;
pieSeries.slices.template.propertyFields.fill = "color";


}); // end am4core.ready()

#cards-chart {
  width: 100%;
  height: 700px;
  position: absolute;
  top: 15%;
  z-index: 13;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="cards-chart"></div>

【讨论】：