Question

嗨，大家好，我有一个谷歌图表，将通过数据库搜索生成填充它，但如果这个列在我的情况下公司是很多，它将继续缩小列栏的大小，请参阅图像以下示例图片1将搜索限制为10：

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

有没有办法将我的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>

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

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

更新您的newGeneratedWidth:值

width: newGeneratedWidth,

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

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

1 个答案: