如何在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
              }


} );

请建议我如何实现这一点。还检查这个 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 并找出确定使用哪个箭头的方法。检查其文档并找出将其用于您的设置的最佳方法。

Answer 2

我希望文档更清晰，但您可以使用嵌套属性更改标签颜色：

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

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

Answer 3

我需要我的字体颜色是深色的，因为我的图表背景颜色是白色的：

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