如何更改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并想出一个办法来确定哪些箭头来使用。检查其文档并找出将其用于设置的最佳方式。