AmChart: Change label color of axis

问题

I'm using AmChart to make a serial graph and I want to set a different color for the last category label.

Does somebody know how this is possible?

This my code to create the graph and 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();

回答1:

You can use categoryAxis.labelColorField to specify which field in your data holds the color for category axis labels.

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

If you you need to color just the last label, you would set that field on your last data point. I.e.:

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

Here's a working example:

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

回答2:

In amCharts 4:

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

See the official codepen example

来源：https://stackoverflow.com/questions/29972032/amchart-change-label-color-of-axis

标签

javascript

amcharts