Javascript Highcharts 柱形图中的最大条宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5968595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maximum bar width in Highcharts column charts
提问by rusty
I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: highcharts.com/demo/column-basic
我正在使用 Highcharts 创建一些垂直条（又名“柱状图”），很像这里：highcharts.com/demo/column-basic
Thing is, sometimes there are 30 bars in the chart, sometimes only two. Where then are two really wide bars in the chart, it looks really weird, so the decision was made to set a maximum width for the bars. That way if there are only two then they wouldn't get wider than, say, 50px, but if there were 50 then Highcharts could size them in the way it sees fit.
问题是，有时图表中有 30 个柱，有时只有两个。那么图表中的两条非常宽的条形图看起来非常奇怪，因此决定为条形图设置最大宽度。这样，如果只有两个，那么它们的宽度不会超过 50 像素，但是如果有 50 个，那么 Highcharts 可以按照它认为合适的方式调整它们的大小。
So my problem is that Highcharts doesn't have a way to explicitly set the maximum width of the columns. Has anyone found a solution to that?
所以我的问题是 Highcharts 没有办法明确设置列的最大宽度。有没有人找到解决办法？
采纳答案by Brock Adams
Update:As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.
更新：从 Highcharts 版本 4.1.8 开始，请参阅下面的 Adam Goodwin 的回答。
For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.
多年来，设置列最大宽度的唯一方法是通过 JavaScript 动态设置。
Basically:
基本上：
- Check the current bar width.
- If it is greater than desired, reset the series'
pointWidth. - Force a redraw to make the change visible.
- 检查当前的条宽。
- 如果它大于所需值，请重置系列'
pointWidth。 - 强制重绘以使更改可见。
Something like:
就像是：
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);
}
}
回答by Adam Goodwin
Obviously this question was asked a long time ago when this feature didn't exist, but as of Highcharts 4.1.8 you can do this without any workarounds using the plotOptions.column.maxPointWidthsetting:
显然，这个问题很久以前就被问到了，当时这个功能不存在，但是从 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... */
});
Below is the JSFiddle of the basic column chart example, modified to show this working:
下面是基本柱状图示例的 JSFiddle，经过修改以显示此工作：
And the documentation for this setting is here: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth
此设置的文档在这里：http: //api.highcharts.com/highcharts#plotOptions.column.maxPointWidth
回答by Pawe? Fus
Ultimate solution is to wrap drawPointsand overwrite shaperArgsof each point, especially x-position and width:
最终的解决方案是包装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)
Use:
用：
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
And live demo: http://jsfiddle.net/83M3T/1/
和现场演示：http: //jsfiddle.net/83M3T/1/
回答by Rinzler
a better way would be has suggested
一个更好的方法是建议
check this fiddle
检查这个小提琴
just add
只需添加
series: {
pointWidth: 20
}
in you plot options and thats it . :) enjoy cheers ...
在你的情节选项中，就是这样。:) 享受欢呼声...
回答by subbu
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
});
}
}
}
回答by Aaron
In my case, setting pointRangeto 1 was what I needed. If a category with a box was adjacent to a category without a box (only outliers in a scatter series) the box would be wider than the category.
就我而言，设置pointRange为 1 正是我所需要的。如果有框的类别与没有框的类别相邻（仅散点序列中的异常值），则框将比类别宽。
There is a good explanation here.
这是一个很好的解释在这里。
回答by Harish
I faced the same issue using HighCharts and this is how I fixed it !!
我在使用 HighCharts 时遇到了同样的问题，这就是我修复它的方法！！
-- Create a wrapper div for the chart, with some minimum width and overflow:auto. (To enable horizontal scroll)
-- 为图表创建一个包装 div，具有一些最小宽度和溢出：自动。（启用水平滚动）
-- Set the "pointWidth" of each bar to the required value. (say, pointWidth: 75)
-- 将每个条的“pointWidth”设置为所需的值。（例如，点宽：75）
-- Now set the chartWidth dynamically, based on the number of bars.
-- 现在根据柱的数量动态设置图表宽度。
Use chartWidth = (number of bars) * (pointWidth) * 2
使用图表宽度 =（条数）*（点宽度）* 2
So, if you have 15 bars, chartWidth = 15*75*2 = 2250px, where 2 is used to create larger chart width, to accommodate spacing between bars.
因此，如果您有 15 个条形，则 chartWidth = 15*75*2 = 2250px，其中 2 用于创建更大的图表宽度，以适应条形之间的间距。
--In this manner, You can have any number of bars of same width in the scrollable chart ... :)
--通过这种方式，您可以在可滚动图表中拥有任意数量的相同宽度的条... :)
回答by david
I used the spacingTop attribute to enforce a maximum pointWidth on a bar chart:
我使用了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();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
因此，如果在特定宽度上有一个条形，则间距将被调整并且图表绘制得更小。
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
这不会更改容器的大小，但会将条形保持在特定大小以下，并且您的 pointPadding 和 groupPadding 不会受到影响。
You could do the same with spacingRight and would have a consistent Chart without ugly spaces between the bars.
你可以用spacingRight做同样的事情，并且在条形之间没有丑陋的空间会有一个一致的图表。
