要使amcharts中的每个柱子具有不同的颜色,可以通过以下代码示例来实现:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 添加数据
chart.data = [{
"category": "A",
"value": 10,
"color": "#FF0000" // 设置柱子颜色为红色
}, {
"category": "B",
"value": 20,
"color": "#00FF00" // 设置柱子颜色为绿色
}, {
"category": "C",
"value": 15,
"color": "#0000FF" // 设置柱子颜色为蓝色
}];
// 创建类目轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建柱状图系列
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.columns.template.propertyFields.fill = "color"; // 设置柱子颜色字段
series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
// 添加图例
chart.legend = new am4charts.Legend();
// 更新图表
chart.invalidateData();
在上述示例中,我们通过在数据对象中添加color字段来指定每个柱子的颜色。然后,通过设置series.columns.template.propertyFields.fill属性将color字段与柱子的颜色属性关联起来。
这样,每个柱子都会根据数据中的颜色字段来显示不同的颜色。