highchart图表动态高度

Posted 2023-03-06

【中文标题】highchart图表动态高度

【英文标题】：dynamic height of chart of highchart

【发布时间】：2017-02-15 02:01:28

【问题描述】：

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

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

【问题讨论】：

请提供一个最小的可重现示例，您可以从这个小提琴开始：jsfiddle.net/s0zb9z8e

【参考方案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));

小提琴：

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

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

【讨论】：

好！凉爽的！！！但是当我在 highcharts 中使用向下钻取（例如 5 个主要条形图）时如何实现它 - 我计算图表高度 func(5) 然后用户单击 bar#3，它“向下钻取”到 15 个二级条形图，我可以再次计算高度

您可以在drillDown 和drillUp 事件中添加一个函数，该函数使用预定义的数据点计数，或者检索并计算当时的数据点，以及使用Chart.update() 函数更新height 属性。 api.highcharts.com/highcharts/chart.events.drilldown | api.highcharts.com/highcharts/Chart.update