Question

构建柱形图。是否可以为每个组设置自己的宽度？例如，对于美国组，宽度为100px，对于中国组，宽度为300px，英国shirana为500px？还是可以隐藏某些列（如果其值为null）？使用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>

如何为Google图表组设置不同的宽度

0 个答案: