javascript – 保持谷歌图表列的大小并强制滚动条

2019年7月28日 151次阅读

嗨伙计基本上我有一个谷歌图表,将通过数据库搜索生成填充它,但如果这个列在我的情况下公司是很多它将继续缩小列栏的大小,请参阅下面的图像示例

图片1将搜索限制为10：

《javascript – 保持谷歌图表列的大小并强制滚动条》

但如果我添加更多的公司,这意味着不限制我的搜索结果,这将发生
《javascript – 保持谷歌图表列的大小并强制滚动条》

有没有办法将我的colums的大小限制为第一个图像之一,如果它超过了创建滚动条的那个？

我已经有了类似的东西

  #detailedCharts {
 overflow-x: scroll; 
 overflow-y: hidden;
 min-height: 500px;
 min-width: 100px;   
 width: 100%;
 height: 100%;
    margin-bottom: 5%;
}

因为CSS希望它会变大并溢出所以它会在div上创建一个滚动条,但这并没有按预期工作

我用于图表的代码如下

 static drawChartGetTotalIssuesByCategoryAllCompanies(data) {
        let dataTable = new google.visualization.DataTable();

        dataTable.addColumn("string", "Company Name");
        dataTable.addColumn("number", "Issue Count");

        data.forEach(row => { dataTable.addRow([row.name, row.issueCount]) });
        let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));
        const options = {
            title: "Issues per Company for category",
            hAxis: {
                title: "Company Name"
            },
            vAxis: {
                title: "Issue Count"
            },
        };

        chart.draw(dataTable, options);
    }
}

传入的数据是一个看起来像这样的对象数组

 public int IssueCount { get; set; }
 public string Name { get; set; }

这个图表将被放置在这个html中

<div class="row">
            <div id="detailedCharts" class="col-sm-12">

            </div>

关于如何实现这一点的任何建议？
提前致谢

最佳答案 假设你的其余代码有点困难,但有潜在的解决方案.也许CSS不是最好的选择,因为图表宽度通常是根据它的父级宽度决定的.我会在图表功能中添加灵活的宽度：

首先,获取图表中的元素数量：

var numberOfElements = data.qg.length;

然后将它们乘以您想要的值：

  var newWidth = (numberOfElements * 100);

然后将此值作为width参数添加到options数组中：

  var options = {
    width: newWidth
  };

如果没有足够的元素,则可以限制仅在超过x个元素时生成宽度.如果更少,它将保持默认值.示例(仅在超过4个元素时生成宽度)：

var newWidth =  (numberOfElements > 4) ? (numberOfElements * 100) : 0;

你可以做同样的最小宽度.示例(仅在计算的宽度大于400时生成宽度)：

var newGeneratedWidth =  (newWidth > 400) ? newWidth : 0;

然后使用新的newGeneratedWidth更新宽度值：

width: newGeneratedWidth,

这是一个例子：
https://jsfiddle.net/e7de4e4h/

点赞