增加对数据透视表的响应能力答案

【问题标题】：Adding responsiveness to pivottable增加对数据透视表的响应能力
【发布时间】：2015-04-22 15:47:23
【问题描述】：

我一直在我的一个应用程序中使用 (http://nicolas.kruchten.com/pivottable) pivottable.js。该表已呈现良好，但我在为我的 UI 添加响应性时遇到了问题。该表不会缩小到使用媒体查询为小视口定义的 div 大小。无论视口如何，表格总是以相同的大小绘制。此外，表格列的宽度似乎是不可改变的。我试图在 pivot.css 中更改 col 的定义类，但这似乎没有奏效。

table.pvtTable .pvtColLabel {text-align: center; width:50px;}
table.pvtTable .pvtTotalLabel {text-align: right; width: 50px;}

以下是我如何在绘制表格的“graph”类的 div 上使用媒体查询：

@media (min-width: 320px) and (max-width: 640px) {

    /*Making gray box span across the screen*/
    body {
        padding-left: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-right: 0px; /*changed to avoid hz scroll on mobile device*/
        padding-top: 0px;
    }
    #console {
        /* Negative indent footer by it's height */
    margin: 0px auto -40px;
}
.graph {
     width:250px;
     height:270px;
}
.wrapper-gray{
    background-color: #ebebeb;
    padding: 5px;
}


.section-box{
    background-color: #fff;
    padding: 5px;
}
}

如果我哪里出错了，请指导我。

【问题讨论】：

标签： jquery css pivottable.js

【解决方案1】：

图表的维度在创建时是固定的，通过 PivotUI 的renderOptions 参数控制。例如：

rendererOptions: {
   c3: {
      size: { height:200, width:200}
   }
}

来源：Issue 487

【讨论】：

【解决方案2】：

有一个使用 PivotTable.js 和 Bootstrap 的扩展库 NReco Javascript Pivot Table。

【讨论】：