3

縦棒グラフにカスタム色を追加しようとしているので、各縦棒の色が異なります。次のコードがあります。

__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 に color プロパティを追加しようとしましたが、最初の色を持つようにすべてを設定します。

私はほとんどアイデアがありません。

4

1 に答える 1