Сохраняйте размер столбцов диаграммы google и силу полосы прокрутки

Question

Привет, ребята, в основном, что у меня есть диаграмма Google, которая будет сгенерирована с помощью поиска в базе данных, чтобы заполнить ее, однако, если эти столбцы, которые в моем случае являются компаниями, принадлежат многим, это будет держать сокращение размеров брусков столбцов см примеры изображений ниже Image 1 ограничить поиск до 10:

но если я добавить много больше компаний, это означает, что не ограничивает мой результат поиска это будет происходить

есть способ ограничить размер моих колонок одним из первых изображений, и если это s превышает это, чтобы создать полосу прокрутки?

я уже есть что-то вроде

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

Если у вас не хватает элементов, вы можете ограничить ширину генерироваться только белый en больше, чем x элементов. Если значение меньше, оно будет сохранять значение по умолчанию. Пример (для генерации ширины только при использовании более 4 элементов):

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

Вы можете сделать то же самое для минимальной ширины.Пример (генерировать ширину, только если расчетная ширина будет больше, чем 400):

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

И затем обновить значение width с новым newGeneratedWidth:

width: newGeneratedWidth, 

Ниже приведен пример: https://jsfiddle.net/e7de4e4h/