AMCharts Donut Chart颜色渐变定制

Question

是否可以向 AMCharts 圆环图添加颜色渐变？？？我有一个甜甜圈图，它就像一个进度条，显示完成状态。 AMCharts 只允许我为已完成百分比和未完成百分比选择两种颜色。我希望图表的已完成部分填充颜色渐变。它可以在条形图中完成，但我想不出一种方法来处理圆环图。任何帮助，将不胜感激。谢谢。

Answer 1

从版本 3.18 开始，amCharts 支持 pie/donut 图表上的径向渐变。

要启用它，请使用 gradientRatio 属性。它是一组值。零表示没有变化，负值 - 使颜色变深，正值 - 变浅。

例如这一行：

"gradientRatio": [0, 0, 0 ,-0.2, -0.4]

这意味着渐变将有 5 个步骤。前 3 个步骤将采用切片的原始颜色。 4th 会使它变暗 20%。 5 - 40% 更暗。

这是一个完整的工作示例：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "dataProvider": [{
    "country": "United States",
    "visits": 7252
  }, {
    "country": "China",
    "visits": 3882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "United Kingdom",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 414
  }, {
    "country": "India",
    "visits": 384
  }, {
    "country": "Spain",
    "visits": 211
  }],
  "valueField": "visits",
  "titleField": "country",
  "startEffect": "elastic",
  "startDuration": 2,
  "innerRadius": "40%",
  "gradientRatio": [0, 0, 0 ,-0.2, -0.4],
  "gradientType": "radial"
});

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 435px;"></div>

AMCharts Donut Chart颜色渐变定制

AMCharts Donut Chart colour gradient customization

javascript

css

amcharts