So ändern Sie die Beschriftungstextfarbe in Amaturen

Question

Ich muss den Beschriftungstext in grün und rot ändern.Wie können wir die Farbe eines Etiketts mithilfe von Java-Skript-Amcharts ändern? und ist es möglich, nach dem Etikettentext einen Pfeil nach oben hinzuzufügen. Bitte prüfen Sie den folgenden Code.

 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 
       } 


}); 

Bitte empfehlen Sie mir Wie kann ich dieses JsFiddle überprüfen erreichen this.Also

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

Answer 1

Sie können die Etikettenfarbe mit der color Eigenschaft in der Grafik-Objekt festgelegt:

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

color demo

Wenn Sie es für jede einzelne Spalte angeben müssen, müssen Sie die Farbe in Ihren Daten festlegen und labelColorField verwenden, um darauf zuzugreifen. Wenn Sie eine color-Eigenschaft festlegen, wird auf diese Farbe zurückgegriffen, wenn einem bestimmten Datenelement keine labelColorField-Eigenschaft zugeordnet ist.

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

labelColorField demo.

Bearbeiten wieder

können Sie Pfeile hinzufügen, indem Sie die Unicode-Escape-Zeichenfolge eingefügt wird. Zum Beispiel ist der Pfeil nach oben \ u02191 und der Pfeil nach unten ist \ u02193.

Zum Beispiel:

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

Updated fiddle

Wenn Sie diese dynamisch tun müssen, um, werden Sie ein labelFunction und herausfinden, einen Weg festlegen müssen, um zu bestimmen, welche verwenden Pfeil. Überprüfen Sie die Dokumentation und finden Sie heraus, wie Sie sie am besten für Ihre Einrichtung verwenden können.