Попытка установить собственные цвета для диаграммы

Я пытаюсь добавить собственные цвета в столбчатую диаграмму, чтобы каждый столбец имел свой цвет. У меня такой код:

__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();
}

Он точно отображает диаграмму на основе созданного мной провайдера данных, но не устанавливает цвета. Я получил код цвета отсюда: https://www.amcharts.com/docs/v4/concepts/colors/. Раздел графиков XY и производных графиков

Я пытался использовать тему, но это тоже не сработало:

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);

Он устанавливает для всех столбцов первый цвет. Затем я попытался добавить свойство цвета в dataProvider для каждого столбца, но снова он устанавливает для всех них первый цвет.

У меня почти нет идей.


amcharts4 amcharts
person discodowney    schedule 14.12.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Здесь есть несколько проблем.

Во-первых, если вы хотите, чтобы диаграмма использовала только цвета, вместо добавления к ColorSet диаграммы по умолчанию, вам необходимо вручную переопределить, назначив массив Colors для chart.colors.list (вместо pushing значений).

Далее, цвет столбца (fill) по умолчанию зависит от его серии. Таким образом, даже если вы заполните ColorSet диаграммы, только каждая новая серия будет иметь другой цвет, а не каждый столбец.

Чтобы установить цвет отдельного столбца, это будет примерно так:

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

Чтобы каждый столбец имел свой собственный цвет, мы можем установить это при первом создании столбца, то есть на его inited событие. Кроме того, столбец dataItem будет иметь свойство / ссылку на свой index, поэтому мы можем использовать его с getIndex метод ColorSet для последовательного назначения цветов.

Итак, ваш окончательный код может выглядеть примерно так:

__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

person notacouch    schedule 15.12.2018