javascript - 您如何强制 Google Charts vAxes 渲染？

Question

目前我在一个页面上渲染了两个图表，我使用的是谷歌的可视化图表库，由于页面大小问题，vAxes 在某些/大部分时间拒绝渲染。

如果我给它足够的空间，它会很好地渲染轴，但如果它稍微偏离一点，即使这些该死的轴有足够的空间，它们也只是拒绝渲染，我不能那样做!

我调查了一下，它似乎在工作时渲染一堆标签，而在它不工作时不渲染，这让我认为应该有一些公牛 if-else “AI”主动选择来破坏我! FS!

有没有人有使用图表的经验并设法找到一种解决方法来强制 lib 呈现 vAxes 而不管谷歌“AI”的意愿如何？ (说真的，机器人第二定律怎么了？!服从我，人渣!)

对不起，我有点烦 atm。

编辑:抱歉，为了提供详细信息，这里是呈现图表的 js block :

<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 元素:< div id="chart_div1"style="height: 100%;">(它在多个其他 div 中，但这不是重点)

如您所知，这是一个基本的 c-c-c-组合图表，我认为 $jsonEventType 无关紧要，但它在这里:

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}]}]}”

Answer 1

您可以使用 chartArea 配置代码来确保图表两侧有足够的空间。

默认情况下，图表会跟随容器的大小，
但它并没有完全填满容器。

我喜欢使用 chartArea 选项，
将图表拉伸(stretch)到容器的高度和宽度，
并在边缘为轴和图例等留出空间......

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

请参阅以下工作片段...

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>