highchart图表的动态高度

Question

有必要根据其上的数量行（例如，对于水平条）自动动态地更改（更新）highcharts 图表的高度。

一个元素（例如，水平条）的高度是恒定的（例如，20px）。自动设置 X 元素的图表高度 (~ 20px * X)。

Answer 1

您可以通过一些预先设置来完成此操作。

设置变量：
- 顶部和底部边距
- 点和组填充
- 点的宽度
- 您的数据集中的数据点数量

相应地计算并设置图表的 height 属性:

var barCount = chartData.length,
    pointWidth = 20,
    marginTop = 70,
    marginRight = 10,
    marginBottom = 50,
    marginLeft = 100,
    groupPadding = 0,
    pointPadding = 0.3,
    chartHeight = marginTop 
                + marginBottom 
                + ((pointWidth * barCount) * (1 + groupPadding + pointPadding));

Fiddle:

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

（更新页面上的 dataPoints 变量以查看它的实际效果）

highchart图表的动态高度

dynamic height of chart of highchart

height

charts

dynamic

highcharts