如何在amcharts的圆环图中使用多种颜色？ [关闭]

Question

我想在圆环图中提供 2 种颜色，这将使渐变填充作为 amcharts 中的背景颜色。

我已经找到了单色渐变色的解决方案，但是如何给一个以上颜色的渐变色呢？

Current Donut chart

Resulted Donut chart

这是我的代码：

 var chart5 = AmCharts.makeChart( "emp-hour-chartContainer1", {
                "type": "pie",
                "theme": "light",
                "dataProvider": chartEmpData1,
                "titleField": "title",
                "valueField": "value",
                "labelRadius": -21,
                "radius": "50%",
                "innerRadius": "50%",
                "alpha": 1,
                "fontSize": 12,
                "color": "#ffffff",
                "labelText": "[[title]] Days",
                "balloonText": "[[title]] Days",
                "colors":["#f7b72f","#02aace"],
                "export": {
                    "enabled": true
                },
                "allLabels": [{
                    "y": "45%",
                    "align": "center",
                    "size": 15,
                    "text": "Work",
                    "color": "#262727"
                }]
            });

Answer 1

您可以通过定义gradientRatio 对切片应用渐变，例如：

AmCharts.makeChart("...", {
  // ...
  gradientRatio: [-.4, 0, .2], //negative = darker gradient, positive = lighter gradient
  // ...
});

演示：

var chartEmpData1 = [{title: 13, value: 13}, {title: 25, value: 25}]
var chart5 = AmCharts.makeChart("emp-hour-chartContainer1", {
  type: "pie",
  theme: "light",
  dataProvider: chartEmpData1,
  titleField: "title",
  valueField: "value",
  gradientRatio: [-.4, 0, .2],
  labelRadius: -21,
  radius: "50%",
  innerRadius: "50%",
  alpha: 1,
  fontSize: 12,
  color: "#ffffff",
  labelText: "[[title]] Days",
  balloonText: "[[title]] Days",
  colors: ["#f7b72f", "#02aace"],
  export: {
    enabled: true
  },
  allLabels: [
    {
      y: "45%",
      align: "center",
      size: 15,
      text: "Work",
      color: "#262727"
    }
  ]
});

#emp-hour-chartContainer1 {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="emp-hour-chartContainer1"></div>