我使用谷歌可视化图表与ComboChart,因为一段时间,它总是工作。
我没有改变任何东西,突然我得到以下谷歌可视化错误信息,当加载我的ComboChart。Cannot read property 'minorTextOpacity' of null.
什么是错的?难道谷歌改变了ComboChart的用法?
下面是我的一些代码片段。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable({{{consumdata}}});
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var myRangeSlider = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'Date',
ui: {format: {pattern: 'yyyy/MM/dd'},
step: 'day',
cssClass: 'filter-date'
}
}
});
var ochart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'ochart_div',
options: {
focusTarget: 'category',
curveType: 'function',
width: 1100,
height: 300,
vAxis: [
{
title: '[kWh]',
viewWindowMode: 'explicit',
minValue: 0,
maxValue: 2000,
viewWindow: {min: 0,max:2000},
},
{
title: '[m³]',
viewWindowMode: 'explicit',
minValue: 0,
maxValue: 10,
viewWindow: {min: 0,max:10},
},
],
series: {
0:{type: 'line', targetAxisIndex:0},
1:{type: 'line', targetAxisIndex:0},
2:{type: 'line', targetAxisIndex:1},
},
hAxis:{
format: 'YYYY-MM'
},
chartArea: {width: 950, height: 250},
legend: {position: 'top'},
thickness: 1,
colors: ['green', 'red', 'blue'],
},
view: {
columns: [0,2,3,4]
}
});
var cchart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'cchart_div',
options: {
focusTarget: 'category',
curveType: 'function',
width: 1100,
height: 300,
vaxis: [
{
title: "[kWh]",
viewWindowMode: 'explicit',
minValue: 0,
maxValue: 1000,
viewWindow: {min: 0,max:1000},
},
{ title: "[°C]",
viewWindowMode: 'explicit',
minValue: -10,
maxValue: 20,
viewWindow: {min: -10,max:20},
},
],
series: {
0:{type: 'line', targetAxisIndex:0},
1:{type: 'line', targetAxisIndex:1},
},
hAxis:{
format: 'YYYY-MM'
},
chartArea: {width: 950, height: 250},
legend: {position: 'top'},
thickness: 1,
colors: ['green', 'orange'],
},
view: {
columns: [0,2,5]
}
});
dashboard.bind(myRangeSlider, [ochart,cchart]);
dashboard.draw(data);
}
</script>
</head>
<body>
<div id='dashboard_div'>
<div style="text-align: left;">Diagram1 </div>
<div id='ochart_div'></div>
<div id="filter_div"></div>
<hr>
<div style="text-align: left;">Diagram 2</div>
<div id="cchart_div"></div>
</div>
</body>
</html>
注:LineChart工作没有问题。
这可能是一些东西,改变了在 'current'
版本。
google.charts.load('current', {'packages':['corechart', 'controls']});
尝试使用以前保存的版本,看看是否有效。发行说明,点击右边的发布日期可以看到版本号......
保存在2020年2月的版本 (47)...
google.charts.load('47', {'packages':['corechart', 'controls']});
保存在2018年10月的版本(46)...
google.charts.load('46', {'packages':['corechart', 'controls']});
保存在2017年6月的版本(45.2)... ...
google.charts.load('45.2', {'packages':['corechart', 'controls']});
等等...