在 amcharts 上显示文本数据

Question

我用amcharts画了一张图表。生成图表后，我将其保存为 PNG 图片。

图表如下：

我想添加文本数据，我没有找到任何方法来添加一些文本内容，例如下面提到的生成图表（在 xls 上手动）：

我是这样生成图表的：

var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [
{
    "year": "-----Oxytocin creating behaviours----------",
    "income":0
},
{
    "year": "Curious",
    "income": <?=$q1?>
}, {
    "year":  "Compassionate",
    "income": <?=$q2?>
}, {
    "year": "Trusting",
    "income": <?=$q3?>
}, {
    "year": "Courageus",
    "income": <?=$q4?>
}, 
{
    "year": "Collaborative",
    "income": <?=$q5?>
}, 
{
    "year": "",
    "income": 0
}, 
{
    "year": "-----Oxytocin creating behaviours--------",
    "income":0
},

        {
    "year": "Convinced/Closed",
    "income":<?=$q6?>,
   "color": "#6FE771"
},
 {
    "year": "Isolated",
    "income": <?=$q7?>,
 "color": "#6FE771"
},
 {
    "year": "Suspicious",
    "income":<?=$q8?>,
    "color": "#6FE771"
},
 {
    "year": "Threatened",
    "income": <?=$q9?>,
    "color": "#6FE771"
},
{
    "year": "Disconnected",
    "income": <?=$q10?>,
    "color": "#6FE771"
},
{
    "year": "",
    "income": 0
}, 

    ],

    "valueAxes": [{
    "title": "Conversational Intelligence - Self assessment",
                              "minimum": 0,
"maximum": 5

}],
"graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "colorField": "color"
}],
"depth3D": 0,
"angle": 30,
"rotate": true,
"categoryField": "year",
"categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
},
"export": {
    "enabled": true
 }
});

Answer 1

您可以在 categoryAxis 上使用 guides 添加模型图像中标记为黄色的文本。

确保同时增加 marginRight，使这些文本标签达到 space。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  // ...
  "marginRight": 200,
  "categoryAxis": {
    // ...
    "guides": [{
      "category": "Curious",
      "label": "Stimulating discussion...",
      "position":"right"
    }, {
      "category": "Compassionate",
      "label": "Showing concern",
       "position":"right"
    }, {
      // etc...
    }]
  }
});

这是一个 Codepen 演示，可以看到（部分）实际操作：https://codepen.io/team/amcharts/pen/5668edd799ed57caa2227fe25efd893c?editors=1010

在 amcharts 上显示文本数据

Show textual data on amcharts

amcharts