Как установить разную ширину для групп Google Графики - PullRequest
Новая
       10

Как установить разную ширину для групп Google Графики

0 голосов
/ 11 января 2019

Постройте столбчатую диаграмму. Можно ли установить собственную ширину для каждой группы? Например, для группы в США ширина составляет 100 пикселей, для группы в Китае ширина составляет 300 пикселей, а в Великобритании ширана составляет 500 пикселей? или можно скрыть некоторые столбцы, если его значение равно нулю? Пробовал использовать groupWhidth, но он не принимает массив, в котором указана ширина. 

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Bronze');
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

  dataTable.addRows([
    ['USA',46, createCustomHTMLContent(1), 29, createCustomHTMLContent(2), 29, createCustomHTMLContent(3)],
    ['China', 38, createCustomHTMLContent(4), 27, createCustomHTMLContent(5), 23, createCustomHTMLContent(6)],
    ['UK', 29, createCustomHTMLContent(7), 17, createCustomHTMLContent(8), 19, createCustomHTMLContent(9)]
  ]);
  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('charts')).draw(dataTable, options);
}

function createCustomHTMLContent(a) {
  return '<div>' + a + '</div>';
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charts"></div>
...