3

I'm trying to add custom colours to a column chart, so each column has a different colour. I have the following code:

__this._chartColours = ['#2776BD', '#00A1D0','#00C195','#7ED321','#A8C600','#C9B600','#E3A600', '#F7941E', '#FC7149'];
__this._chart = am4core.create(__this._tileChartDiv[0], am4charts.XYChart);

if(result.chartDataMap != null)
{
    var colorSet = new am4core.ColorSet();
    var counter = 0;
    $.each(result.chartDataMap, function(xAxis, yAxis)
    {
        __this._dataProvider.push({"category": xAxis, "column-1": yAxis});
        __this._chart.colors.list.push(am4core.color(__this._chartColours[counter]));
    });
    __this._chart.data = __this._dataProvider;
    __this._chart.padding(40, 40, 40, 40);
    
    var categoryAxis = __this._chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.minGridDistance = 60;
    categoryAxis.title.text = result.xAxisTitle;

    var label = categoryAxis.renderer.labels.template;
    label.wrap = true;
    label.maxWidth = 120;

    var valueAxis = __this._chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = result.yAxisTitle;

    var series = __this._chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = "category";
    series.dataFields.valueY = "column-1";
    series.tooltipText = "{valueY.value}"
    series.columns.template.strokeOpacity = 0;

    __this._chart.cursor = new am4charts.XYCursor();
}

It renders the chart fine based on the dataprovider I create but it is not setting the colors. I got the colours code from here: https://www.amcharts.com/docs/v4/concepts/colors/. The XY Chart and derivative charts section

I tried to use a theme, but that didn't work either:

function am4themes_myTheme(target) 
{
    if (target instanceof am4core.ColorSet) 
    {
        $.each(__this._chartColours, function(index, item)
        {
            target.list.push(am4core.color(item));
        });                   
    }
}

am4core.useTheme(am4themes_myTheme);

It sets all the columns to the first colour. Then I tried adding a color property to the dataProvider for each column but again it sets them all to have the first colour.

I'm pretty much out of ideas.

4

1 回答 1

6

这里有几个问题。

首先，如果您希望图表仅使用您的颜色，而不是附加到默认图表的 s ColorSet，您必须通过将s数组分配给（而不是ing 值）来手动覆盖它。Colorchart.colors.listpush

接下来，默认情况下，列的颜色 ( fill) 基于其系列。因此，即使您填充图表ColorSet，也只有每个新系列会获得不同的颜色，而不是每列。

要设置单个列的颜色，它将类似于：

column.fill = am4core.color("#2776BD");

为了让每一列都有自己的颜色，我们可以在列的第一次实例化时设置它，即在它template的事件上。此外，列将具有对其的属性/引用，因此我们可以将其与'方法一起使用来按顺序分配颜色。inited dataItemindexColorSetgetIndex

所以你的最终代码可能看起来像这样：

__this._chart.colors.list = [
  am4core.color("#2776BD"),
  am4core.color("#00A1D0"),
  am4core.color("#00C195"),
  am4core.color("#7ED321"),
  am4core.color("#A8C600"),
  am4core.color("#C9B600"),
  am4core.color("#E3A600"),
  am4core.color("#F7941E"),
  am4core.color("#FC7149")
];
series.columns.template.events.once("inited", function(event){
  event.target.fill = chart.colors.getIndex(event.target.dataItem.index);
});

这是我们的简单柱形图演示的一个分支，其中包含上述代码和您的自定义颜色：

https://codepen.io/team/amcharts/pen/2ef06f392b347412c61bcdcd3439a5c6

于 2018-12-15T00:35:57.307 回答