用谷歌地图设置谷歌列图表高度

Question

我必须使用谷歌地图设置谷歌列图表高度。根据人体比率显示图表。我可以区分男女类别。但人口明智地必须改变图表的高度。

var data = google.visualization.arrayToDataTable([
[ '村名', '男性',{ role: "style" }, '女性', { role: "style" } ],  
[関本村,3,2],
[下長竹村,152,70],
[中里村,30,35],
[永塚村,3,2],
[落幡村,7,1],
[関本村,3,2],
]);
var options = {
        width:300,
        height:200,
        backgroundColor: 'transparent',
        colors: ['#58ACFA','#FFC0CB'],
        legend: {position: 'none', textStyle: {color: 'white', fontSize: 12}},
        bar: { groupWidth: '5%' },
        baselineColor: 'transparent',
        vAxis: { gridlines: { count: 0, color: 'transparent' }, },
        hAxis: { textPosition: 'bottom',textStyle: {color: 'white', fontSize: 15}},
        isStacked: true,
  };

高度：200显示图表高度相同。

必须显示每个图形的不同高度..任何想法??

Answer 1

听起来你需要根据每行的总体数来计算相对大小。

您可以使用加权平均值，然后将其乘以所有图表的总大小。

在这里，我使用500.但是，您会注意到最小和最大人口之间的巨大差异。不确定图表会有多好，8像素高...

您可以使用某种倍增器来使它们更接近。只想展示一种可能性......

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart'],
  callback: drawChart
});

function drawChart() {
  var popSize;
  var sizeArray = [];
  var showResult;
  var tempDiv;
  var totalSize = 500;
  var total = 0;

  var data = google.visualization.arrayToDataTable([
    ['??', '??','??'],
    ['???',3,2],
    ['????',152,70],
    ['???',30,35],
    ['???',3,2],
    ['???',7,1],
    ['???',3,2],
  ]);


  for (var i = 0; i < data.getNumberOfRows(); i++) {
    popSize = data.getValue(i, 1) + data.getValue(i, 2);
    sizeArray.push(popSize);
    total += popSize;
  }

  showResult = document.getElementById('displaySizes');
  for (var i = 0; i < sizeArray.length; i++) {
    sizeArray[i] = (sizeArray[i] / total) * totalSize;
                                                   
    // example purposes only
    tempDiv = showResult.appendChild(document.createElement('DIV'));
    tempDiv.innerHTML = sizeArray[i].toFixed(2);
  }
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="displaySizes"></div>

＆＃13;

＆＃13;

＆＃13;

然后在您的选项中使用sizeArray ...

var options = {
  width: 300,
  height: sizeArray[i],
  ...