1

I want to maintain the same size of the bars. no matter how many there are values. here is the size I want to have all bars.enter image description here

when added four values the bars become smaller. enter image description here

I want all the bars are the same size. no matter that I have to scroll to see the other bars (this is what I want).

this is my code: 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"

      }]
    });
});
4

2 回答 2

1

这可以通过如下pointWidth参数来完成：

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

为了让scrollbar您可能应该升级到 highstock，但这只能水平工作。或者您可以设置一个div允许图表在内部“更大”并滚动该div窗口。

于 2016-01-08T20:22:24.253 回答
0

不确定您正在寻找什么，但这可能会有所帮助。

我前段时间整理了一个例子，根据柱的数量调整图表的高度，使用一些预设参数：

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

所以，告诉它你想要什么大小的条，它们之间有多少填充，图表顶部和底部有多少边距，以及你有多少数据点。

条形将保持相同的大小和间距，而图表本身会增长以适应它们。

例子：

要查看它是否有效，请更改此行中的 12：

var chartData = randomData(12, true);

到任何你想要的号码。

（（编辑

由于您正在处理分组数据，因此您必须稍微更改数学运算。您需要考虑组数，并将 hat 乘以 groupPadding，再加上点数 * pointPadding。

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

于 2016-01-08T20:41:50.520 回答