Прокрутка в Google Charts

Question

Привет, ребята, я все время искал, как это сделать, даже в документах Google, которые тратят на это часы, не уверен, что я google искал ужасно или что-то в этом роде. Простой вопрос: у меня есть эта диаграмма столбцов, в которой будет отображаться случайное количество баров на основе данных моей БД, но я хочу, если их больше 5 или больше, чем размер, например, чтобы дать мне полосу прокрутки. В принципе, я хочу, чтобы размер шрифта и ширину столбцов в таблице, чтобы оставаться такой же размер, независимо от того, сколько из них у меня есть, но для всех из них, чтобы появиться с скроллинга код диаграммы я есть, и то, что я пытался ниже:

let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts")); 

    const options = { 
     title: "Issues per Company for category", 
     width: "1000", 
     height: "500", 
     hAxis: { 
      title: "Company Name" 
      }, 
     vAxis: { 
      title: "Issue Count" 
     } 
    }; 

    chart.draw(dataTable, options); 
} 

и я пытался заставить его показать только 5 в надежде, что будет отображать полосу прокрутки по себе, как этот

let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts")); 

    const options = { 
     title: "Issues per Company for category", 
     width: "1000", 
     height: "500", 
     hAxis: { 
      title: "Company Name", 
      viewWindowMode: "explicit", 
      viewWindow: { 
       max:5 
      } 
     }, 
     vAxis: { 
      title: "Issue Count" 
     } 
    }; 

    chart.draw(dataTable, options); 
} 

Но это не сработало никаких идей? Спасибо advnace

Answer 1

Следующая строка имеет стиль, который должен быть добавлен в CSS файл (каскадных таблиц стилей) или строкового запроса страницы:

#detailedCharts { 
    overflow-x: scroll;  
} 

В приведенном выше вопрос, видно из кода что диаграмма привязывается к элементу с идентификатором «detailCharts», поэтому в указанном выше стиле «#detailedCharts» используется для применения стиля к этому элементу.

let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));