【发布时间】：2020-06-06 19:28:11
【问题描述】：
我一直在使用带有 ComboChart 的谷歌可视化图表，它一直在工作。
我没有更改任何内容，但在加载我的 ComboChart 时突然收到以下 google 可视化错误消息：Cannot read property 'minorTextOpacity' of null.
怎么了？ Google 是否改变了 ComboChart 的使用方式？
在我的代码的一些 sn-p 下方：
<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 工作正常。
【问题讨论】：
-
您是否使用
jsapi加载谷歌图表？请分享load声明好吗？ -
见上文，我已经清理并简化了代码。现在完成脚本和 html。加载语句是一种常见的做法。同样，LineChart 正在工作....还有滑块。
标签： javascript charts google-visualization