Google图表折线图间歇地显示h轴

时间:2019-02-04 02:31:47

标签: javascript charts google-visualization

我有一个非常基本的折线图。

我有一个名称的h轴,然后是生产率的百分比计算。

问题:H轴仅显示某些时间-我找不到任何可复制的条件来使其出现或重新出现-这只是随机的。

该页面上还有大约7-8个其他图表,它们都能正常运行。

这是我的间断折线图代码-是否有任何明显的问题可能会引起问题?

google.charts.load('current', {'packages':['table', 'corechart', 'bar', 'line']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {

  ...

  var on_time_chart = new google.visualization.DataTable();
  on_time_chart.addColumn('string', 'Name');
  on_time_chart.addColumn('number', 'On Time %');
  on_time_chart.addColumn({type: 'number', role: 'annotation'});
  on_time_chart.addRows([
    ['Ron', 83.3, 83.3],
    ['Ed', 45.5, 45.5],
    ['Gary', 25.0, 25.0],
  ]);
  var chart = new google.visualization.LineChart(document.getElementById('on_time_perf_chart'));
  chart.draw(on_time_chart, { width: 500,
                            height: 350,
                            chartArea:{left:50,top:10,width:350,height:150},
                            pointSize: 5,
                            legend: {title: 'On Time%', position: 'bottom', alignment: ''},
                            hAxis: {showTextEvery: 1, slantedTextAngle: 50, slantedText: 1},
                            vAxis: {title: '%'}
                        });
}

注意:我已经删除了{showTextEvery:1,slantedTextAngle:50},但它似乎可以正常工作,但是这会产生难看的显示。如果标签不消失,我无法向hAxis添加任何其他配置选项...

1 个答案:

答案 0 :(得分:0)

我找到了解决方案-我在页面的页脚中有代码,试图向页面添加侦听器以检测调整大小,然后发出drawVisualization调用来调整图表的大小。

删除了此内容并解决了问题。

if (document.addEventListener) {
    window.addEventListener('resize', drawVisualization);
}
else if (document.attachEvent) {
    window.attachEvent('onresize', drawVisualization);
}
else {
    window.resize = drawVisualization;
}