我有一堆堆积的列,显示约翰和乔吃的某些水果的数量。除了水果的数量之外,我还想展示水果消费的成本是多少。以我为例,我现在可以显示约翰或乔吃的每种水果的量(例如,约翰以100美元的价格吃了5个苹果,而约翰以60美元的价格吃了3个苹果)。但是,我还要显示每个水果的总成本(对于苹果来说,总消费为8个苹果,价值160美元)。有办法可以做到吗?
您可以在这里查看我的初步工作:http : //jsfiddle.net/SpzBa/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <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'
}
}
}
},
series: [{
name: 'John',
data: [{y: 5, Amount: 100}, {y: 3, Amount: 60}, {y: 4, Amount: 80}]
}, {
name: 'Joe',
data: [{y: 3, Amount: 60}, {y: 4, Amount: 80}, {y: 4, Amount: 80}]
}]
});
});
(来源:rackcdn.com)
是否可以显示每个食用水果的总量?悬停列时,说将总计放在“总计”标签旁边。前任。在图中,“总计:8($ 160)”。
非常感谢你!
房子有点绕,但是您可以使用获得所有系列的数组this.series.chart.series
,并且每个系列都有一个点数组,您可以将其用作当前this.point.x
指数,因此,通过迭代所有系列,您可以计算出Amount
属性的总计。
tooltip: {
formatter: function() {
var allSeries = this.series.chart.series;
var totalAmount = 0;
for(var s in allSeries) { totalAmount += allSeries[s].points[this.point.x].Amount; }
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+
'Total: '+ this.point.stackTotal + ' (<b>$ ' + totalAmount +')';
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句