高图表的动态高度 [英] dynamic height of chart of highchart

问题描述

有必要自动动态地更改（更新）highcharts图表的高度，具体取决于数量行（例如，横条）。一个元素的高度（例如，水平条）是恒定的（例如20px）。
自动设置X元素的图表高度（〜20px * X）。

解决方案

• 设置变量为：
  
  
  
  
  • 顶部和底部余量
  
  
  • 点和组填充
  
  
  • 点的宽度
    
  • 您的数据集中的数据点
  
  

计算并设置图表的<$ c

  var barCount = chartData.length，
 pointWidth $ c $ height>  = 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 变量以查看它的实际效果）

It is necessary to automaticly and dynamicly change (update) the height of highcharts's charts depending on the amount rows (example, for horizontal bars) on it.

The height of one element (example, horizontal bar) is constant (for example, 20px). The height of charts with X elements set automaticly (~ 20px * X).

解决方案

You can do this with a little pre-setup.

• Set variables for:
  • the top and bottom margins
  • the point and group padding
  • the width of the points
  • the number of data points in your data set

Calculate and set the chart's height property accordingly:

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/

(update the dataPoints variable on the page to see it in action)

这篇关于高图表的动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！