每个条带渐变颜色的amCharts

Question

是否可以用amCharts制作具有每个条形渐变颜色的条形图，例如this？

Answer 1

如果您只想渐变，请遵循我们的guide on gradients。例如

var gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("red"));
gradient.addColor(am4core.color("blue"));
gradient.rotation = 90;
series.columns.template.fill = gradient;

但是，如果您希望渐变是平行的，恐怕需要一些自定义编码。

我们将借用一些颜色实用程序和逻辑from v4 source。有一个辅助函数，可通过am4core.colors.interpolate来找出两种颜色之间的颜色，前两个参数是最小/最大颜色（作为具有r，g和b的对象），最后一个是百分比（作为小数）您要从中选择一种颜色的两种颜色之间的位置。

这样，我们可以在列的fill上使用适配器，例如：

var max = 500;
var red = am4core.color('red');
var blue = am4core.color('blue');
series.columns.template.adapter.add('fill', function(fill, column) {
  var columnGradient = new am4core.LinearGradient();
  columnGradient.rotation = 90;
  // interpolate(min.rgb, max.rgb, percent)
  console.log(am4core.colors.interpolate(blue.rgb, red.rgb, column.dataItem.dataContext.litres / max) );
  columnGradient.addColor(am4core.color( am4core.colors.interpolate(blue.rgb, red.rgb, column.dataItem.dataContext.litres / max) ), 1, 0);
  columnGradient.addColor("blue", 1, 1);
  return columnGradient;
});

演示：

https://codepen.io/team/amcharts/pen/f3a2f155bd88aba69621de6f88911f4b?editors=0010