WebDataRocks设置百分比高度不生效且无法正常渲染求助

第一步：修复初始化语法错误 #

组件无法正常渲染的直接原因是你代码中的height: 100%属于非法JavaScript语法，百分比作为参数需要以字符串形式传入，将对应配置项改为字符串格式即可解决初始化报错问题。

修正后的初始化代码示例：

var pivot = new WebDataRocks({
  container: 'wdr-component',
  height: "100%", // 百分比参数需加引号转为字符串格式
  beforetoolbarcreated: customizeToolbar,
  toolbar: true,
  report: {
    // 后续你的报表配置内容
  }
});

第二步：配置全局高度样式实现全屏填充 #

CSS百分比高度需相对于父元素的明确计算高度才能生效，仅给组件设置100%高度无法生效，需要保证组件的所有上级容器都设置了匹配的高度规则，添加如下CSS即可：

/* 重置根元素高度和默认边距，避免出现多余滚动条 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 组件挂载容器设置100%高度 */
#wdr-component {
  height: 100%;
}

备选简化方案 #

如果不想逐层配置父元素高度，可以直接用视口高度单位实现全屏效果，修改初始化配置即可：

height: "100vh"

如果页面存在其他固定元素（如顶部导航栏），可以用calc动态计算高度，假设导航栏高度为60px，配置如下即可：

height: "calc(100vh - 60px)"

内容的提问来源于stack exchange，提问作者Richard Ellen