AmChart:更改轴的标签颜色 [英] AmChart: Change label color of axis

问题描述

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

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?

这是我创建代码并返回validateData()的代码.

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

推荐答案

您可以使用 categoryAxis.labelColorField ，用于指定数据中哪个字段包含类别轴标签的颜色.

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"
}];

这是一个可行的示例:

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

这篇关于AmChart:更改轴的标签颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！