AmChart：更改轴的标签颜色

Question

我正在使用 AmChart 制作序列图，我想为最后一个类别标签设置不同的颜色。

有人知道这怎么可能吗？

这是我创建图表的代码 return validateData()。

var chart = AmCharts.makeChart("historyContent", {
        "type": "serial",
        "theme": "light",
        "dataProvider": loadDataProvider(tag),
        "valueAxes": [{
                "gridColor": "#FFFFFF",
                "gridAlpha": 0.2,
                "dashLength": 0
            }],
        "gridAboveGraphs": true,
        "graphs": [{
                "balloonText": "[[p_type]] | [[p_date]]: <b>[[value]]</b>",
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "value"
            }],
        "chartCursor": {
            "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
        },
        "categoryField": "period",
        "categoryAxis": {
            "gridPosition": "start",
            "gridAlpha": 0,
            "tickPosition": "start",
            "tickLength": 20,
            "labelFunction": function(valueText, serialDataItem, categoryAxis) {
                var p_type = valueText.substring(valueText.length - 10, 0);
                var p_date = valueText.substring(valueText.length - 10);
                console.log(valueText);
                valueText = p_type + "\n" + p_date;
                return valueText;
            }
        }
    });

    return  chart.validateData();

Answer 1

您可以使用 categoryAxis.labelColorField 指定数据中的哪个字段保存类别轴标签的颜色。

var chart = AmCharts.makeChart("historyContent", {
        "type": "serial",
        "theme": "light",
        "dataProvider": loadDataProvider(tag),
        "valueAxes": [{
                "gridColor": "#FFFFFF",
                "gridAlpha": 0.2,
                "dashLength": 0
            }],
        "gridAboveGraphs": true,
        "graphs": [{
                "balloonText": "[[p_type]] | [[p_date]]: <b>[[value]]</b>",
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "value"
            }],
        "chartCursor": {
            "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
        },
        "categoryField": "period",
        "categoryAxis": {
            "labelColorField": "color", // specifies which field in data holds color for label
            "gridPosition": "start",
            "gridAlpha": 0,
            "tickPosition": "start",
            "tickLength": 20,
            "labelFunction": function(valueText, serialDataItem, categoryAxis) {
                var p_type = valueText.substring(valueText.length - 10, 0);
                var p_date = valueText.substring(valueText.length - 10);
                console.log(valueText);
                valueText = p_type + "\n" + p_date;
                return valueText;
            }
        }
    });

如果您只需要为最后一个标签着色，您可以在最后一个数据点上设置该字段。即：

[{
  period: "First",
  value: 100
}, {
  period: "Second",
  value: 200
}, {
  period: "Third",
  value: 300
}, {
  period: "Last",
  value: 400,
  color: "#cc0000"
}];

这是一个工作示例：

http://codepen.io/amcharts/pen/02ffa4178c069262b705abbf17bba5dc

Answer 2

在 amCharts 4 中：

const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.fill = am4core.color("#A0CA92");

看官方codepen example

AmChart：更改轴的标签颜色

AmChart: Change label color of axis

javascript

amcharts