Question

目前，我在页面上呈现两个图形，我使用的是Google的可视化Charts lib，由于页面大小问题，vAxes在某些/大部分时间拒绝呈现。

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

我调查了一下，它似乎在工作时渲染了一堆标签，而在不工作时却不渲染，这让我认为应该有一些积极的选择，否则“ AI”破坏我！ FS！

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

对不起，我有点讨厌atm。

编辑：抱歉，要提供详细信息，这是呈现图表的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内，但除此以外）

您可以说这是一个基本的c-c-c-combo图表，我认为$ 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}]}]}”

1 个答案:

答案 0 :(得分：1)

Answer 1

您可以使用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>

如何强制Google Charts vAxes渲染？

1 个答案: