如何更改amcharts中的标签文本颜色

时间:2017-03-10 13:28:26

标签: javascript amcharts

我必须将标签文本更改为绿色和红色。我们可以使用java script amcharts更改标签的颜色。并且可以在标签文本之后添加向上箭头。请检查下面的代码。

enter image description here

     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
              }


} );

请建议我如何实现这一点。还要检查这个JsFiddle

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

3 个答案:

答案 0 :(得分:3)

您可以使用图表对象中的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并找出确定使用哪个箭头的方法。检查其文档并找出使用它进行设置的最佳方法。

答案 1 :(得分:2)

我希望文档更加清晰,但是您可以使用嵌套属性更改标签颜色,以便:

chart.labels.template.fill = am4core.color("white");

这将定位您的标签并更改其颜色。

答案 2 :(得分:0)

因为我的图表背景颜色是白色,所以我需要将字体颜色设为深色:

xAxis.renderer.labels.template.fill = am4core.color('#000000');
yAxis.renderer.labels.template.fill = am4core.color('#000000');