Highcharts柱形图中的最大柱宽 [英] Maximum bar width in Highcharts column charts

问题描述

我使用Highcharts创建了一些垂直条（也称为柱状图），如下所示： highcharts.com/demo/column-basic

有时候，图表中有30个条，有时只有两个。那么在图表中有两个非常宽的条，它看起来很奇怪，所以决定设置条的最大宽度。这样，如果只有两个，那么它们不会比50px更宽，但是如果有50个，那么Highcharts可以按照它认为合适的方式来确定它们。

<所以我的问题是Highcharts没有办法明确设置列的最大宽度。有人找到了解决方案吗？

解决方案

更新：截至Highcharts 4.1.8版本，请参阅 Adam Goodwin的答案，在下方。

---

---

多年来，设置列的最大宽度的唯一方法是通过JavaScript动态地进行。

基本上：

1. 检查当前栏宽。 需要重置系列 pointWidth 。


2. 强制重绘以使更改可见。

类似于：

  var chart = new Highcharts.Chart（{ ... ... 
 
 // ---强制最大条宽
 var MaximumBarWidth = 40; //  - 像素
 var series = chart.series [0]; 
 
 if（series.data.length）{
 
 if（series.data [0] .barW> MaximumBarWidth）{
 series .options.pointWidth = MaximumBarWidth; 
 / * ---强制重绘。请注意，在这种情况下redraw（）不会
！ 
因此我们使用类似setSize（）的东西。 
 * / 
 chart.setSize（400，300）; 
} 
} 
  

在jsFiddle上观看演示。

I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: 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.

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?

解决方案

Update: As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.

---

---

For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.

Basically:

1. Check the current bar width.
2. If it is greater than desired, reset the series' pointWidth.
3. Force a redraw to make the change visible.

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

See the demo at jsFiddle.

这篇关于Highcharts柱形图中的最大柱宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！