Highcharts中堆积柱形图中的重叠和圆形堆栈 [英] Overlapping and rounded stack in stacked column graph in Highcharts
问题描述
我正在尝试实现类似于2014列的内容，但是我还没有找到提供这种分层的方法. 这是我到目前为止所掌握的东西.
我需要制作一个堆叠的柱状图，看起来像 2014柱或2015柱.(可行)
I am trying to achieve something like column 2014 but I haven't found a way to provide layering like this. This is a fiddle of what I have till now.
I need to make a stacked column graph that looks like either 2014 column or 2015 column.(which ever is feasible)
-
2014列的问题是我无法找到任何提供(负)边距的属性来实现上述结果.
The problem with column 2014 is that I am not able to find any property to give (negative) margin to achieve the above result.
列2015的问题是我不能仅向左上角和右上角添加边框半径.
The problem with the column 2015 is that I am not able to add border radius to the top-left and top-right corners alone.
小提琴的链接必须随附代码
As links to fiddle must be accompanied by the code
Highcharts.chart('container', {
chart: {
type: 'column',
spacingBottom: 0
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset: 7,
lineWidth: 0,
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: 'gray'
}
},
visible: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
series: {
},
column: {
stacking: 'normal',
borderWidth: 0,
borderRadius: 5,
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
推荐答案
To achieve your a 2014 result, you can use a highchart wrapper, and change how the points are drawn, like this:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
$.each(this.points, function (i,point) {
let borderRadius = this.options.borderRadius;
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius; //add borderRadius pixels to the total height of a point (to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
let seriesIndex = this.index
$.each(this.points, function (i,point) {
point.shapeArgs.y -= seriesIndex == 0 ? 0 : 5; //if it is not the first series, then move the series down 5 pixels
point.shapeArgs.height += 5; //add 5 pixels to the total height(to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'column',
spacingBottom: 0
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset: 7,
lineWidth: 0,
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: 'gray'
}
},
visible: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
series: {
},
column: {
stacking: 'normal',
borderWidth: 0,
borderRadius: 5,
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
工作中的JSFiddle:: https://jsfiddle.net/ewolden/cyfv64ub/122/
如果您想获得 2015 结果，则可以使用相同的函数，如下所示:
If you wanted the 2015 result instead, you use the same function, like this:
(function(H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
let seriesIndex = this.index,
firstIndex = this.chart.series[0].index,
lastIndex = this.chart.series[this.chart.series.length - 1].index,
borderRadius = this.options.borderRadius;
this.options.borderRadius = 0; //Remove the border radius
$.each(this.points, function(i, point) {
if (seriesIndex != firstIndex && seriesIndex != lastIndex) {
point.shapeArgs.y -= borderRadius; //make sure the middle points cover the outer points
point.shapeArgs.height += borderRadius*2;
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
$.each(this.points, function(i, point) {
if (seriesIndex == firstIndex || seriesIndex == lastIndex) {
point.graphic.attr({
r: borderRadius //set the borer radius to be whatever it was before to only the outer points
});
}
});
});
}(Highcharts));
我在系列上手动设置了zIndex，但是也可以这样做.只是现在没有时间找到在哪里设置它.
I set the zIndex on the series manually, but that can be done as well. Just don't have time right now to find where to set it.
(function(H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
let seriesIndex = this.index,
firstIndex = this.chart.series[0].index,
lastIndex = this.chart.series[this.chart.series.length - 1].index,
borderRadius = this.options.borderRadius;
this.options.borderRadius = 0; //Remove the border radius
$.each(this.points, function(i, point) {
if (seriesIndex != firstIndex && seriesIndex != lastIndex) {
point.shapeArgs.y -= borderRadius; //make sure the middle points cover the outer points
point.shapeArgs.height += borderRadius*2;
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
$.each(this.points, function(i, point) {
if (seriesIndex == firstIndex || seriesIndex == lastIndex) {
point.graphic.attr({
r: borderRadius //set the borer radius to be whatever it was before to only the outer points
});
}
});
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'column',
spacingBottom: 0
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset: 7,
lineWidth: 0,
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: 'gray'
}
},
visible: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
series: {
},
column: {
stacking: 'normal',
borderWidth: 0,
borderRadius: 5,
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
zIndex: 0
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
zIndex: 1
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
zIndex: 0
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
正在工作的JSFiddle:: https://jsfiddle.net/ewolden/kqrLs3m8/
还要注意，我正在操纵函数 drawPoints ，并且在文档状态下，它仅在开始时运行一次.因此，如果您开始禁用/启用系列，那么它们不一定会像您期望的那样.
Do also note that I am manipulating the function drawPoints here, and as the docs state, it is only run once at the start. So if you start disabling/enabling series, then they will not necessarily look as you expect them to.
这篇关于Highcharts中堆积柱形图中的重叠和圆形堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
