How can you force Google Charts vAxes render?

问题:

Currently I have two graphs I'm rendering on a page, I'm using google's visualization Charts lib and due to page sizing issues the vAxes refuses to render some/most of the time.

If I give it enough space, it will render the axes fine, but if it's even slightly off, even when there's plenty of space for these bloody axes, they just refuse to render, I can't have that!

I looked into it and it seems to be rendering bunch of tags when it works and doesn't render when it doesn't work, which makes me think there ought to be some bull if-else "AI" that actively chooses to sabotage me! FS!

Has anyone had experience with Charts and managed to find a workaround on forcing the lib to render the vAxes regardless of what google "AI" wills? (Seriously, what happened to second law of robotics?! OBEY ME, SCUM!)

Sorry, I'm a bit irked atm.

Edit: Sorry, to provide the details, here's the js block rendering the charts:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {


 var options = {
      hAxis: {showTextEvery: 5},
      vAxes: {  
                0: {textPosition: 'out',
                    viewWindowMode:'pretty',
                    viewWindow: {min:0},                        
                    gridlines: {color: 'transparent'},
                  },
              1: {  textPosition: 'out',
                    viewWindow: {min:0},
                    gridlines: {color: 'transparent'}
                  },

              },
              seriesType: 'bars',
                 series: {0: {targetAxisIndex:0, type: 'line'},
               1:{targetAxisIndex:1},
               2:{targetAxisIndex:1},
           }
    };

//Chart render
  var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);

  var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
    chart1.draw(data1, options);



}

div element:< div id="chart_div1" style=" height: 100%;"> (it's within multiple other divs, but that's besides the point)

As you can tell it's a basic c-c-c-combo chart, the $jsonEventType doesn't matter i think but here it is:

string(661) "{"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]}"

回答1:

you can use the chartArea config code to ensure there is enough room on either side of the chart.

by default, the chart will follow the size of the container,
but it does not entirely fill the container.

I like to use the chartArea option,
to stretch the chart to the height and width of the container,
and leave room on the edges for the axes and legend, etc...

chartArea: {
  top: 32,         // leave room on top for legend
  left: 60,        // for axis index 0
  right: 60,       // for axis index 1
  bottom: 32,      // for x-axis
  height: '100%',  // stretch height
  width: '100%',   // stretch width
},
height: '100%',    // ensure fills height of container
width: '100%',     // fills width of container

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});

  var options = {
    chartArea: {
      top: 32,         // leave room on top for legend
      left: 60,        // for axis index 0
      right: 60,       // for axis index 1
      bottom: 32,      // for x-axis
      height: '100%',  // stretch height
      width: '100%',   // stretch width
    },
    height: '100%',    // ensure fills height of container
    width: '100%',     // fills width of container

    hAxis: {showTextEvery: 5},
    vAxes: {
      0: {
        textPosition: 'out',
        viewWindowMode:'pretty',
        viewWindow: {min: 0},
        gridlines: {color: 'transparent'},
      },
      1: {
        textPosition: 'out',
        viewWindow: {min: 0},
        gridlines: {color: 'transparent'}
      },
    },
    seriesType: 'bars',
    series: {
      0: {targetAxisIndex:0, type: 'line'},
      1: {targetAxisIndex:1},
      2: {targetAxisIndex:1},
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart_div1 {
  height: 100%;
}

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