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

目前,我在页面上呈现两个图形,正在使用google的可视化Charts lib,并且由于页面大小问题,vAxes有时/大部分时间拒绝呈现.

如果我给它足够的空间,它将使轴精细,但是即使它稍微偏离,即使这些血腥的轴有足够的空间,它们也拒绝渲染,我不能拥有它！

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

有没有人有过使用Charts的经验,并且设法找到一种解决方法,可以强制lib渲染vAxes,而不管谷歌“ AI”的意愿如何？ (严重的是,机器人第二定律发生了什么？！OBEY ME,SCUM！)

抱歉,我有点生气.

编辑：很抱歉,要提供详细信息,这是呈现图表的js块：

<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-combo图表,我认为$jsonEventType并不重要,但在这里是：

string(661)“ {” cols“：[{” label“：” Date“,” type“：” string“},{” label“：” To Audit“,” type“：” number“},{”标签 “：” 打开”, “类型”： “数字”},{ “标记”： “关闭”, “类型”： “数字”}], “行”：[{ “C”：[{ “v” ： “2018年5月7日”},{ “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 “：” 2018年2月8日 “},{” v“：369 },{ “v”：0},{ “v”：12}]},{ “C”：[{ “v”： “2018年9月8日”},{ “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 }]}]}”

解决方法:

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

默认情况下,图表将遵循容器的大小,
但它不会完全填满容器.

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

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>

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20191013/1905013.html