在Highcharts中保持固定的大小

Question

我要保持相同大小的条。 不管有多少价值。 这是我要所有酒吧的大小。

当添加四个值时，条形变得更小。

我希望所有条形都相同。 无论我必须滚动查看其他栏（这都是我想要的）。

这是我的代码： http : //jsfiddle.net/Laxfsbtb/

$('#container').highcharts({
        chart: {
            type: 'bar'
        },

         series: [{
          name: 'text1',
          data: [1000, 950,920,880,850,234],
          color: "#FF0000"
      }, {
          name: 'text2',
          data: [800,770,750,740,730,4324],
          color: "#000000"

      }, {
          name: 'text3',
          data: [600,540,535,500,400,324],
          color: "#00FF00"

      }]
    });
});

Answer 1

可以使用pointWidth参数完成此操作，例如：

plotOptions: {
  series: {
    pointWidth: 20 //width of the bar/column/point.
  }
},

要允许scrollbar您可能应该升级到高级库存，但这只能水平使用。 或者，您可以设置一个div ，以使图表在内部“更大”并在该div窗口中滚动。

Answer 2

不确定是否要查找什么，但这可能会有所帮助。

不久前，我整理了一个示例，使用一些预设参数根据条形图的数量调整图表的高度：

var barCount     = chartData.length; 
var pointWidth   = 20;
var marginTop    = 60;
var marginRight  = 10;
var marginBottom = 50;
var marginLeft   = 100;
var pointPadding = 0.3;

var chartHeight = marginTop 
            + marginBottom 
            + ((pointWidth * barCount) * (1 + groupPadding + pointPadding));

因此，告诉它您想要条形图的大小，它们之间的填充量，图表顶部和底部的边距多少以及您拥有多少个数据点。

当图表本身增长以容纳它们时，条形将保持相同的大小和间距。

例：

• http://jsfiddle.net/jlbriggs/kpu5d1qf/

要查看它的工作原理，请在此行中更改12：

var chartData = randomData(12, true);

无论您要多少。

（（编辑

由于您正在处理分组数据，因此您必须对数学进行一些更改，您需要考虑组数，然后将hat乘以groupPadding，再加上点数* pointPadding。

您还必须使数据点的计数稍微复杂一些。