保持谷歌图表栏的大小和强制滚动条

嗨，大家好我基本上是一个谷歌图表，将通过数据库搜索生成填充它，但如果这在我的情况下，这些列是公司是很多它会不断萎缩的竖条的尺寸请查看下面图片1限制搜索图像的例子来10：保持谷歌图表栏的大小和强制滚动条

，但如果我增添了不少公司，是指不限制我的搜索结果会出现这种情况

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

我已经有了，希望像

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

由于CSS会得到大和溢出，因此会造成对股利的滚动条，但这没有工作如预期

我的代码正在使用的图表是如下

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>

就如何实现这一目标的任何建议吗？在此先感谢

来源

2017-02-22 Harry

假设代码的其余部分有点困难，但有潜在的解决方案。也许CSS不是最好的选择，因为图表宽度通常是根据其父宽度决定的。我想补充灵活的宽度内图表功能：首先，得到一个图表中元素的个数：你想

var numberOfElements = data.qg.length;

然后与值乘他们：

var newWidth = (numberOfElements * 100);

然后将此值添加到在options阵列，作为width参数：

var options = { 
    width: newWidth 
    };

如果你有没有足够的元素，你可以限制你的宽度只能生成WH超过x个元素。如果更少，它将保持默认值。示例（仅在超过4个元素时生成宽度）：

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

您可以对最小宽度执行相同操作。实施例（以产生宽度仅当计算出的宽度将超过400）：

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

然后用新的newGeneratedWidth:

width: newGeneratedWidth,

这里更新width值是一个例子： https://jsfiddle.net/e7de4e4h/

来源

2017-02-22 19:14:44 Armin

你好，谢谢你，我会检查它tommorow，因为我现在不能知道你想看到什么代码来帮助理解情况吗？ – Harry

这将是很高兴知道你的js（googleCharts）代码，也许你的HTML代码。无论如何，我想这应该起作用，但能够测试它会很好。 – Armin

好吧将测试并添加它tommorow如果这不起作用谢谢 – Harry

保持谷歌图表栏的大小和强制滚动条

回答

相关问题