amcharts5 XY차트(XYChart, 막대차트) 범례 설정 및 색상지정

 

class MyTheme extends am5.Theme {
	setupDefaultRules() {
      this.rule("ColorSet").set("colors", [
        am5.color(0x1e73be), /* 블루 */
        am5.color(0xe05151), /* 레드 */
        am5.color(0xa8a8a8) /* 그레이 */
      ]);
    }
}
        
let root = am5.Root.new("chartdiv2_"+index);

root.setThemes([
	am5themes_Animated.new(root), MyTheme.new(root)
]);

let chart = root.container.children.push(
    am5xy.XYChart.new(root, {
        panY: false,
        wheelY: "zoomX",
        layout: root.verticalLayout
    })
);

// Define data
let data = [
    {voteType: "찬성", count: agreeCnt},
    {voteType: "반대", count: unAgreeCnt},
    {voteType: "기권", count: abstentionCnt}
];

let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    maxDeviation: 1,
    categoryField: "voteType",
    renderer: am5xy.AxisRendererX.new(root, {
    	/* 막대그래프의 폭 설정 */
        cellStartLocation: 0.2, /* 왼쪽끝에서 0.2만큼 떨어져서 그림 */
        cellEndLocation: 0.8 /* 오른쪽끝에서 0.8만큼 떨어져서 그림 */
    }),
    tooltip: am5.Tooltip.new(root, {})
}));

xAxis.data.setAll(data);

let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    numberFormat: "#'표'",
    maxPrecision: 0,
    renderer: am5xy.AxisRendererY.new(root, {})
}));

let series = chart.series.push(
    am5xy.ColumnSeries.new(root, {
        name: "Series",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "count",
        categoryXField: "voteType",
        tooltip: am5.Tooltip.new(root, {})
    })
);

series.columns.template.setAll({
    templateField: "settings",
    tooltipText: "{categoryX}:{valueY}",
    cornerRadiusTL: 5,
    cornerRadiusTR: 5
});

series.columns.template.adapters.add("fill", (fill, target) => {
    return chart.get("colors").getIndex(series.columns.indexOf(target));
});

series.columns.template.adapters.add("stroke", (stroke, target) => {
    return chart.get("colors").getIndex(series.columns.indexOf(target));
});

series.data.setAll(data);

series.appear();

let legend = chart.children.push(am5.Legend.new(root, {
    nameField: "categoryX",
    centerX: am5.percent(50),
    x: am5.percent(50)
}));

legend.data.setAll(series.dataItems);
chart.appear(10, 1);