更改 amCharts 饼图切片的颜色

如何解决更改 amCharts 饼图切片的颜色

这是图表数据：

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,{
  "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.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",target) {
     return target.dataItem.dataContext["color"];
});

如何正确更改颜色？

解决方法

您可以使用 propertyFields 将您的 Dim procsChrome As Process() = Process.GetProcessesByName("chrome") For Each chrome As Process In procsChrome If chrome.MainWindowHandle = IntPtr.Zero Then Continue For Dim elm As AutomationElement = AutomationElement.FromHandle(chrome.MainWindowHandle) Dim elmUrlBar As AutomationElement = elm.FindFirst(TreeScope.Descendants,New PropertyCondition(AutomationElement.NameProperty,"Address and search bar")) If elmUrlBar IsNot Nothing Then Dim patterns As AutomationPattern() = elmUrlBar.GetSupportedPatterns() If patterns.Length > 0 Then Dim val As ValuePattern = DirectCast(elmUrlBar.GetCurrentPattern(patterns(0)),ValuePattern) If Not elmUrlBar.GetCurrentPropertyValue(AutomationElement.HasKeyboardFocusProperty) Then Debug.Print(LCase(val.Current.Value).Trim) Exit For End If End If Next 值映射到切片的 Dim elm As AutomationElement = AutomationElement.FromHandle(chrome.MainWindowHandle) 属性：

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,{
  "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.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()