Javascript Highcharts中堆叠柱形图中的重叠和舍入堆栈

我正在努力实现类似column 2014的目标，但我还没有找到一种方法来提供这样的分层。是我目前所拥有的一把小提琴。


我需要制作一个堆叠的柱状图，看起来像是2014年或2015年的柱状图（这是可行的）

• 2014列的问题是，我无法找到任何能够提供（负）利润以实现上述结果的房地产

• 列2015的问题在于，我无法单独将边界半径添加到左上角和右上角。
  

As链接到fiddle必须附带代码

Highcharts.chart（'container'{
图表：{
键入：“列”，
间距底部：0
},
标题：{
文本：“”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]，
抵销：7，
线宽：0，
长度：0
},
亚克斯：{
分:0,，
标题：{
文本：“”
},
堆叠标签：{
启用：false，
风格：{
fontWeight:'粗体'，
颜色：“灰色”
}
},
可见：假
},
图例：{
对齐：'居中'，
垂直排列：“底部”，
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
系列：{
},
专栏：{
堆叠：“正常”，
边框宽度：0，
边界半径：5，
数据标签：{
启用：对，
颜色：“白色”
}
}
},
系列：[{
姓名：'约翰'，
数据：[5,3,4,7,2]，
}, {
姓名：'简'，
数据：[2,2,3,2,1]
}, {
名字：'乔'，
数据：[3,4,4,2,5]
}]
});

要获得a 2014结果，您可以使用，并更改点的绘制方式，如下所示：

(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));


（功能（H）{
H.wrap（H.seriesTypes.column.prototype，'drawPoints'，函数（继续）{
设seriesIndex=this.index
$.each（this.points，function（i，point）{
point.shapeArgs.y-=seriesIndex==0？0:5；//如果不是第一个系列，则将该系列向下移动5个像素
point.shapeArgs.height+=5；//将5个像素添加到总高度（以覆盖间隙）
});
apply（这个，Array.prototype.slice.call（参数，1））；
});
}（高图）；
Highcharts.chart（'容器'{
图表：{
键入：“列”，
间距底部：0
},
标题：{
文本：“”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]，
抵销：7，
线宽：0，
长度：0
},
亚克斯：{
分:0,，
标题：{
文本：“”
},
堆叠标签：{
启用：false，
风格：{
fontWeight:'粗体'，
颜色：“灰色”
}
},
可见：假
},
图例：{
对齐：'居中'，
垂直排列：“底部”，
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
系列：{
},
专栏：{
堆叠：“正常”，
边框宽度：0，
边界半径：5，
数据标签：{
启用：对，
颜色：“白色”
}
}
},
系列：[{
姓名：'约翰'，
数据：[5,3,4,7,2]，
}, {
姓名：'简'，
数据：[2,2,3,2,1]
}, {
名字：'乔'，
数据：[3,4,4,2,5]
}]
});
要获得2015年的成绩，您可以使用这个圆角。js插件：

jshiddle:
谢谢。就像小提琴上的咒语一样，必须在设备上检查。只有几个问题-1。如果一个值太大而一个数据太小（比如，我传递数据：[1,30,4,7,2]），这不会隐藏较小数据的图形吗？问题2-“确保它不是系列中的第一个或最后一个点”-我如何做到这一点？我从来没有使用过包装器函数，所以在high charts的较旧版本（比如v4.2）上可以使用它吗？它可以潜在地删除非常小的数据，是的。当然，您可以添加检查，例如，如果
point.shapeArgs.y'point.shapeArgs.height+=X'，该X值是否应与borderRadius相同？是的，这是正确的。我更新了小提琴来回答问题2，并反映了边界半径的变化。谢谢@raf18seb的回答，但我已经尝试过这种方法。问题在于，如果顶部或底部元素为0，则圆角将消失。虽然，我们可以应用逻辑，比如如果最上面的数据是0，将圆角应用于第二个元素等等，但这将是一个非常肮脏的黑客行为！谢谢你指出这一点。你说得对，这显然是不受欢迎的行为。我将对此进行报告，我们将在将来尝试改进此模块；）
series: [{
  data: [307, 231, 335, 203],
  borderRadiusTopLeft: '20px',
  borderRadiusTopRight: '20px'
}, {
  data: [183, 196, 547, 408]
}, {
  data: [414, 441, 514, 627],
  borderRadiusBottomLeft: '20px',
  borderRadiusBottomRight: '20px'
}]