我正在使用 Highcharts 创建一些垂直条（又名“柱形图”），就像这里一样：highcharts.com/demo/column-basic
问题是，有时图表中有 30 个柱，有时只有两个。那么图表中哪里有两个非常宽的条，看起来很奇怪，所以决定为条设置最大宽度。这样，如果只有两个，那么它们的宽度不会超过 50px，但如果有 50 个，那么 Highcharts 可以按照它认为合适的方式调整它们的大小。
所以我的问题是 Highcharts 没有办法明确设置列的最大宽度。有没有人找到解决方案？
显然，这个问题很久以前就被问过了，当时这个功能不存在，但是从 Highcharts 4.1.8 开始，您可以使用以下plotOptions.column.maxPointWidth设置在没有任何解决方法的情况下做到这一点：
$('#container').highcharts({
/* Other chart settings here... */
plotOptions: {
column: {
/* Here is the setting to limit the maximum column width. */
maxPointWidth: 50
}
}
/* Other chart settings here... */
});
下面是基本柱形图示例的 JSFiddle，经过修改以显示此工作：
此设置的文档在这里：http ://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth
更新：从 Highcharts 版本 4.1.8 开始，请参阅下面的 Adam Goodwin 的回答。
多年来，设置列最大宽度的唯一方法是通过 JavaScript 动态设置。
基本上：
pointWidth。就像是：
var chart = new Highcharts.Chart ( { ... ...
//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series = chart.series[0];
if (series.data.length) {
if (series.data[0].barW > MaximumBarWidth) {
series.options.pointWidth = MaximumBarWidth;
/*--- Force a redraw. Note that redraw() will not
fire in this case!
Hence we use something like setSize().
*/
chart.setSize (400, 300);
}
}
最终的解决方案是包装drawPoints和覆盖shaperArgs每个点，尤其是 x 位置和宽度：
(function(H) {
var each = H.each;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
each(this.data, function(point) {
point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
point.shapeArgs.width = width;
});
}
proceed.call(this);
})
})(Highcharts)
采用：
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
和现场演示：http: //jsfiddle.net/83M3T/1/
建议有更好的方法
检查这个小提琴
只需添加
series: {
pointWidth: 20
}
在你的绘图选项中，就是这样。:) 享受欢呼...
function(chart){
var series = chart.series[0];
//--- Enforce a Maximum bar width
if (series && series.data.length) {
if (series.data[0].pointWidth > MaximumBarWidth) {
for(var i=0;i< chart.series.length;i++)
chart.series[i].update({
pointWidth:MaximumBarWidth
});
}
}
}
我使用 spacingTop 属性在条形图上强制设置最大 pointWidth：
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
因此，如果有一个 Bar 超过一定宽度，则间距将被调整并且图表被绘制得更小。
这不会改变容器的大小，但会将条形保持在一定大小以下，并且您的 pointPadding 和 groupPadding 不会受到影响。
你可以对 spacingRight 做同样的事情，并且会有一个一致的图表，在条形之间没有难看的空间。
就我而言，设置pointRange为 1 是我所需要的。如果带框的类别与没有框的类别相邻（仅散点系列中的异常值），则框将比类别宽。
这里有一个很好的解释。
我使用 HighCharts 遇到了同样的问题，这就是我修复它的方法！
-- 为图表创建一个包装 div，具有一些最小宽度和溢出：自动。（启用水平滚动）
-- 将每个条的“pointWidth”设置为所需的值。（比如说，pointWidth：75）
-- 现在根据柱的数量动态设置chartWidth。
使用 chartWidth = (柱数) * (pointWidth) * 2
因此，如果您有 15 个柱，chartWidth = 15*75*2 = 2250px，其中 2 用于创建更大的图表宽度，以适应柱之间的间距。
--以这种方式，您可以在可滚动图表中拥有任意数量的相同宽度的条... :)