在 Highcharts 中保持固定大小的条形图

Question

我想保持相同大小的条形。不管有多少都有价值。这是我想要所有条形的尺寸。

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

我希望所有的条形都一样大。不管我必须滚动查看其他栏（这就是我想要的）。

$('#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，您可能应该升级到 highstock，但这只能横向使用。或者您可以设置一个 div 允许图表在内部 "larger" 并滚动 div window.

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

给你想要的任何号码。

((编辑

由于您使用的是分组数据，因此您必须稍微更改一下数学运算 bit.you需要考虑组数，然后将 hat 乘以 groupPadding，然后添加到数字中点数 * pointPadding.

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

在 Highcharts 中保持固定大小的条形图

keep fixed size of the bars in Highcharts

javascript

css

highcharts

highcharts-ng