如何更改amcharts中的標籤文本顏色

Question

我必須將標籤文本更改爲綠色和紅色顏色。我們可以使用java腳本amcharts更改標籤的顏色。並且可以在標籤文本後添加向上箭頭。請檢查下面的代碼。

 var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "dataProvider": [], 
    "type": "serial", 
       "theme": "light", 
       "categoryField": "name", 
       "rotate": true, 
       "startDuration": 1, 
       "startEffect":"easeOutSine", 
       "columnSpacing": 0, 
       "autoMargins": false, 
       "marginBottom": 0, 
      "pullOutRadius": 0, 
       "categoryAxis": { 
        "inside": true, 
        "gridPosition": "start", 
        "gridAlpha": 0, 
        "axisAlpha": 0, 
        "tickPosition": "start", 
        "tickLength": 0, 
        "position": "left" 
       }, 
       "trendLines": [], 
       "graphs": [ 
       { 
        "balloonText": " [[name]]: $[[amt]]<br> Index: [[Index]]", 
        "fillAlphas": 0.8, 
        "fillColorsField": "color1", 
        "id": "AmGraph-12", 
        "lineAlpha": 0.2, 
        "title": "amt", 
        "type": "column", 
        "valueField": "value", 
        "showHandOnHover":true, 
        "labelText": "[[Index]]", 
        "labelPosition": "right", 

        "fixedColumnWidth": 15 
       }, 
       { 
        "balloonText": " [[name]]: $[[amt1]]", 
        "fillAlphas": 0.8, 
        "fillColorsField": "color", 
        "id": "AmGraph-22", 
        "lineAlpha": 0.2, 
        "title": "amt", 
        "type": "column", 
        "valueField": "value1", 
        "showHandOnHover":true, 
        "fixedColumnWidth": 15 
       } 
       ], 
       "guides": [], 
       "valueAxes": [ 
       { 
        "id": "ValueAxis-1", 
        "axisAlpha": 0, 
        "gridAlpha": 0, 
        "labelsEnabled": false, 
        "minimum":0 
       } 
       ], 
       "allLabels": [], 
       "balloon": { 
       "fillColor": "#000000", 
       "color": "#ffffff", 
       "fillAlpha": 1.0, 
       "offsetX": 0, 
        "offsetY": 0, 
        "horizontalPadding":0, 
        "maxWidth":100 
       }, 
       "titles": [], 
       "export": { 
       "enabled": true 
       } 


}); 

請建議我我如何能實現this.Also檢查此的jsfiddle

https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/

Answer 1

您可以使用圖形對象，color屬性設置的標籤顏色：

"graphs": [{ 
    // ... 
    "color": "#008000", 
    "labelText": "[[Index]]" 
    }, 

color demo

如果您需要爲每個單獨的列指定它，則必須在數據中設置顏色並使用labelColorField來訪問它。如果您有color屬性集，如果某個特定數據元素沒有關聯的labelColorField屬性，它將回退到該顏色。

"dataProvider": [{ 
    // ... 
    "labelColor": "#880000", 
    "name": "Name1", 
    "value": "148773.88", 
    "value1": "60794.55" 
    }, // ... 
    ] 
    "graphs": [{ 
    // ... 
    "color": "#008000", 
    "labelColorField": "labelColor", 
    "labelText": "[[Index]]" 
    }, 

labelColorField demo。

再次編輯

可以通過插入Unicode轉義字符串添加箭頭。例如，向上箭頭是\ u02191，向下箭頭是\ u02193。

例如：

"labelText": "[[value]] \u02191", 

Updated fiddle

如果您需要動態地做到這一點，你需要設置一個labelFunction並想出一個辦法來確定哪些箭頭來使用。檢查其文檔並找出將其用於設置的最佳方式。