答案 0 :(得分:3)
是的,这是可能的,但你需要捏造它。使标签显示为负数,但使用数字的绝对值(始终为正)。
在您发表评论并链接到代码之后,我找到了一个我认为适合您的解决方案。
//tooltip function
function format_tt(inp) {
index = this.point.index;
var s = '<b>' + this.x + '</b>';
var point = this.point;
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>: ' + point.series.name + ': ' + tdata[index];
return s;
}
//Data
tdata = [20, -20];
//Rework the data to use only the positive values, but only for our graph. Wherever we need the true values, we reference tdata.
data = tdata.map(function(_) {
return Math.abs(_);
});
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
legend: {
align: "center",
labelFormatter: function() {
var count = 0;
for (var i = 0; i < this.yData.length; i++) {
count += this.yData[i]; //change this to tdata[i] to get the true value;
}
return this.name + ' (' + count + ')';
},
y: 3
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Receitas', 'Despesas']
},
credits: {
enabled: false
},
series: [{
name: 'Receitas e despesas',
data: data //Our data, AFTER the conversion
}],
tooltip: {
formatter: format_tt //our tooltip function.
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
jsFiddle:http://jsfiddle.net/zb2edyLe/3/
tdata现在是您放置数据的地方。不是原来的地方,请查看代码中的注释,因为它解释了我所做的事情。