当 amCharts 中的值为零时显示图形标签
Show graph label when value is zero in amCharts
我在 amCharts 中显示旋转条形图。我需要为每个条显示标签,而不考虑值。如果该值为零,则不会显示任何条,因此不会显示标签。有没有一种方法可以让我始终显示标签,而不管其价值如何?
或者更好的是,有没有一种方法可以使 graph.labelOffset 引用一个函数,该函数将 return 根据值的不同而不同?
这是我正在使用的Fiddle。请注意,第 3 项的值为 0,因此不显示任何标签。
这是图表的 javascript 代码。
var gamingData = [
{
"label": "1",
"name": "Thinone",
"grade": 30,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "2",
"name": "Studmuffin",
"grade": 60,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "3",
"name": "Slacker",
"grade": 0,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "4",
"name": "Momof2",
"grade": 60,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "5",
"name": "TheVas",
"grade": 120,
"pounds": 3.6,
"percentage": 2.3
}];
var displayGamingChart = function(gamingData, chartDiv) {
var chart = AmCharts.makeChart(chartDiv, {
"theme": "light",
"type": "serial",
"dataProvider": gamingData,
"graphs": [{
"balloonText": "Down [[pounds]]lbs and [[percentage]]%",
"fillAlphas": 1,
"lineAlpha": 0.2,
// "title": "Minutes",
"type": "column",
"valueField": "grade",
"labelText": "[[name]]",
"labelOffset": -75,
"legendValueText": "",
"fillColors": "#94BA65"
}],
"startDuration": 1,
"depth3D": 20,
"angle": 30,
"rotate": true,
"categoryField": "label",
"categoryAxis": {
"gridPosition": "start",
"fillAlpha": 0.05,
"position": "left"
},
"export": {
"enabled": true
}
});
}
displayGamingChart(gamingData, "gamingChart");
要强制显示标签,即使是那些不适合的标签,请在图表配置中将 showAllValueLabels
设置为 true
:
"graphs": [{
"balloonText": "Down [[pounds]]lbs and [[percentage]]%",
"fillAlphas": 1,
"lineAlpha": 0.2,
// "title": "Minutes",
"type": "column",
"valueField": "grade",
"labelText": "[[name]]",
"labelOffset": -75,
"legendValueText": "",
"fillColors": "#94BA65",
"showAllValueLabels": true
}]
至于你问题的第二部分,没有函数可以单独区分每个条的标签偏移量。
我在 amCharts 中显示旋转条形图。我需要为每个条显示标签,而不考虑值。如果该值为零,则不会显示任何条,因此不会显示标签。有没有一种方法可以让我始终显示标签,而不管其价值如何?
或者更好的是,有没有一种方法可以使 graph.labelOffset 引用一个函数,该函数将 return 根据值的不同而不同?
这是我正在使用的Fiddle。请注意,第 3 项的值为 0,因此不显示任何标签。
这是图表的 javascript 代码。
var gamingData = [
{
"label": "1",
"name": "Thinone",
"grade": 30,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "2",
"name": "Studmuffin",
"grade": 60,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "3",
"name": "Slacker",
"grade": 0,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "4",
"name": "Momof2",
"grade": 60,
"pounds": 3.6,
"percentage": 2.3
},
{
"label": "5",
"name": "TheVas",
"grade": 120,
"pounds": 3.6,
"percentage": 2.3
}];
var displayGamingChart = function(gamingData, chartDiv) {
var chart = AmCharts.makeChart(chartDiv, {
"theme": "light",
"type": "serial",
"dataProvider": gamingData,
"graphs": [{
"balloonText": "Down [[pounds]]lbs and [[percentage]]%",
"fillAlphas": 1,
"lineAlpha": 0.2,
// "title": "Minutes",
"type": "column",
"valueField": "grade",
"labelText": "[[name]]",
"labelOffset": -75,
"legendValueText": "",
"fillColors": "#94BA65"
}],
"startDuration": 1,
"depth3D": 20,
"angle": 30,
"rotate": true,
"categoryField": "label",
"categoryAxis": {
"gridPosition": "start",
"fillAlpha": 0.05,
"position": "left"
},
"export": {
"enabled": true
}
});
}
displayGamingChart(gamingData, "gamingChart");
要强制显示标签,即使是那些不适合的标签,请在图表配置中将 showAllValueLabels
设置为 true
:
"graphs": [{
"balloonText": "Down [[pounds]]lbs and [[percentage]]%",
"fillAlphas": 1,
"lineAlpha": 0.2,
// "title": "Minutes",
"type": "column",
"valueField": "grade",
"labelText": "[[name]]",
"labelOffset": -75,
"legendValueText": "",
"fillColors": "#94BA65",
"showAllValueLabels": true
}]
至于你问题的第二部分,没有函数可以单独区分每个条的标签偏移量。