【发布时间】：2014-03-01 07:30:47
【问题描述】：
来自 highcharts api，http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/yaxis/stacklabels-verticalalign-bottom/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
style: {
color: 'black'
},
enabled: true,
verticalAlign: 'bottom'
}
},
plotOptions: {
column:{
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: false,
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
}); ，堆栈总数放置在图表“内部”的底部。通常，这些总数应该在图表的底部但在图表之外，就在 x 轴标签的上方。
在此示例中，我想实现总计位于“一月”、“二月”等的位置。是否可以使用 highcharts 插件或方法？
我在这里有一个解决方法http://jsfiddle.net/67LCM/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value +'" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
var elm = this.children.div1.className;
switch (elm) {
case "myToolTipAIA":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AIA</p>');
break;
case "myToolTipAMP":
$('#hoverboard').html('AMP');
break;
case "myToolTipAMP RPP":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AMP RPP </p>');
break;
case "myToolTipFidelity Life":
$('#hoverboard').html('Fidelity Life');
break;
case "myToolTipAsteron Life":
$('#hoverboard').html('Asteron Life');
break;
}
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
我在哪里存储总数并将其显示在 xaxis 标签中，但单击图例时无法处理。我做了一些更改（未包含在此小提琴中），在此过程中，我发现我无法使用此解决方法，因为类别/x 轴标签总是先更新，然后在图表更新时更新堆栈标签重绘，这意味着我将永远得到旧的总数，而不是最新的总数。
回到我的问题，如何实现堆栈总数显示在堆栈列下方而不是内部的位置？
谢谢！
【问题讨论】：
标签： highcharts stack vertical-alignment