Highcharts 中堆叠柱形图中的重叠和圆形堆叠
Overlapping and rounded stack in stacked column graph in Highcharts
我正在尝试实现类似于 2014 年专栏的内容，但我还没有找到一种方法来提供这样的分层。 This 是我目前所拥有的fiddle。
我需要制作一个堆积柱形图，看起来像 2014 年的柱状图或 2015 年的柱状图。（哪个可行）
2014 列的问题是我无法找到任何 属性 来提供（负）余量以实现上述结果。
2015 列的问题是我无法单独将边框半径添加到左上角和右上角。
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>
要获得 2014 结果，您可以使用 highchart wrapper，并更改点的绘制方式，如下所示：
(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 结果，您可以使用相同的函数，如下所示：
(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，但这也可以完成。只是现在没有时间找到设置它的位置。
(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，正如文档所述，它在开始时仅 运行 一次。所以如果你开始 disabling/enabling 系列，那么它们不一定会像你期望的那样。
要获得 2015 年的结果，您可以使用此 rounded-corners.js 插件：https://rawgit.com/highcharts/rounded-corners/master/rounded-corners.js
series: [{
data: [307, 231, 335, 203],
borderRadiusTopLeft: '20px',
borderRadiusTopRight: '20px'
}, {
data: [183, 196, 547, 408]
}, {
data: [414, 441, 514, 627],
borderRadiusBottomLeft: '20px',
borderRadiusBottomRight: '20px'
}]
jsFiddle: https://jsfiddle.net/BlackLabel/tdp1y0wb
我正在尝试实现类似于 2014 年专栏的内容，但我还没有找到一种方法来提供这样的分层。 This 是我目前所拥有的fiddle。
我需要制作一个堆积柱形图，看起来像 2014 年的柱状图或 2015 年的柱状图。（哪个可行）
2014 列的问题是我无法找到任何 属性 来提供（负）余量以实现上述结果。
2015 列的问题是我无法单独将边框半径添加到左上角和右上角。
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>
要获得 2014 结果，您可以使用 highchart wrapper，并更改点的绘制方式，如下所示：
(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 结果，您可以使用相同的函数，如下所示：
(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，但这也可以完成。只是现在没有时间找到设置它的位置。
(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，正如文档所述，它在开始时仅 运行 一次。所以如果你开始 disabling/enabling 系列，那么它们不一定会像你期望的那样。
要获得 2015 年的结果，您可以使用此 rounded-corners.js 插件：https://rawgit.com/highcharts/rounded-corners/master/rounded-corners.js
series: [{
data: [307, 231, 335, 203],
borderRadiusTopLeft: '20px',
borderRadiusTopRight: '20px'
}, {
data: [183, 196, 547, 408]
}, {
data: [414, 441, 514, 627],
borderRadiusBottomLeft: '20px',
borderRadiusBottomRight: '20px'
}]
jsFiddle: https://jsfiddle.net/BlackLabel/tdp1y0wb