AmCharts 设置为始终在堆叠列上显示标签

Question

我试图让我的堆积柱 amChart 始终在列上显示值标签。即使他们不合适。

我正在使用此代码：

var qtrchart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"legend": {
    "autoMargins": false,
    "borderAlpha": 0.2,
    "equalWidths": false,
    "horizontalGap": 10,
    "markerSize": 10,
    "useGraphSettings": true,
    "valueAlign": "left",
    "valueWidth": 0
},
"dataProvider": [{
    "QTR":"FY14 Q2",
    "DSAT":0.032602706911007306,
    "Neutral":0.069205892921307938,
    "CSAT":0.89819140016768484},
    {"QTR":"FY14 Q3",
    "DSAT":0.038609212354234618,
    "Neutral":0.060273567620017982,
    "CSAT":0.90111722002574746},
    {"QTR":"FY14 Q4","DSAT":0.038757557172180282,
    "Neutral":0.058425780441887579,
    "CSAT":0.90281666238593217},
    {"QTR":"FY15 Q1",
    "DSAT":0.12391774891774893,
    "Neutral":0.10355411255411255,
    "CSAT":0.77252813852813851}],
"valueAxes": [{
    "stackType": "100%",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "position": "left"
}],
"graphs": [{
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'>[[percents]]%</span>",
    "fillColors": "#87898b",
    "lineColor": "#87898b",
    "color": "#ffffff",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "DSAT",
    "type": "column",
    "valueField": "DSAT"
}, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'>[[percents]]%</span>",
    "fillColors": "#822980",
    "lineColor": "#822980",
    "color": "#ffffff",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Neutral",
    "type": "column",
    "valueField": "Neutral"
}, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'>[[percents]]%</span>",
    "fillColors": "#0096d6",
    "lineColor": "#0096d6",
    "color": "#ffffff",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "CSAT",
    "type": "column",
    "valueField": "CSAT"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "QTR",
"categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0
},
"percentPrecision": 1,
"data_labels_always_on": true
});

http://jsfiddle.net/Cww3D/288/

有办法实现吗？我发现旧版本有一个特殊参数 "data_labels_always_on"，您可以将其设置为 true。但这是行不通的。

有什么想法吗？

Answer 1

文本标签未显示，因为指定的字体大小大于 space 允许的大小。将三个 "graphs" 对象的前两个中的 "fontSize" 属性从 11 修改为 3 将显示您要查找的百分比值。但是，字体太小了，即使在第四列中也不是很清晰。这不是解决方案，但也许是您进一步调查的起点？

没有截屏，抱歉，我还是新手

Answer 2

我也在使用 AmChart，发现这可能对您有所帮助，继续 "graph" 选项：

showAllValueLabels  Boolean false   If graph's type is column and labelText is set, graph hides labels which do not fit into the column's space. If you don't want these labels to be hidden, set this to true.

希望对您有所帮助！

Answer 3

我通过设置 graphs 标签位置来显示标签，如下所示：

"labelPosition": "bottom"

这是 JSFiddle：http://jsfiddle.net/Cww3D/291/

显然，这会强制显示标签，而您期望的 "showAllValueLabels": true 不会。

奇怪！

AmCharts 设置为始终在堆叠列上显示标签

AmCharts set to always display labels on stacked columns

charts

bar-chart

amcharts