AmChart: изменить цвет метки оси

Question

Я использую AmChart для создания серийного графика, и я хочу установить другой цвет для метки последней категории.

Кто-нибудь знает, как это возможно?

Этот мой код для создания графика и возврата 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