javascript - 如何保持谷歌图表列和强制滚动条的大小？

Question

我有一个谷歌图表，将通过数据库搜索生成并填充它。但是，如果在我的例子中是公司的这些列太多，它会不断缩小列栏的大小。请参阅下面的图像示例。

图片 1 将搜索限制为 10:

但是如果我添加更多公司，这意味着不限制我的搜索结果，这将会发生:

有没有办法将我的列的大小限制为第一张图片中的列，如果超过该大小则创建滚动条？

我已经有类似的东西了:

 #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>

如何实现？

Answer 1

假设您的其余代码有点困难，但有可能的解决方案。也许 CSS 不是最好的选择，因为图表宽度通常是根据其父级的宽度决定的。我会在图表功能中添加灵活的宽度:首先，获取图表中的元素数量:

var numberOfElements = data.qg.length;

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

  var newWidth = (numberOfElements * 100);

然后将此值添加到 options数组，作为 width参数:

  var options = {
    width: newWidth
  };

如果你没有足够的元素，你可以限制你的宽度只在超过x个元素时才生成。如果小于，它将保持默认值。示例(仅在超过 4 个元素时生成宽度):

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

您可以对最小宽度执行相同的操作。示例(仅当计算出的宽度大于 400 时才生成宽度):

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

然后更新你的width值(value)与新 newGeneratedWidth:

width: newGeneratedWidth,

举个例子: https://jsfiddle.net/e7de4e4h/