我已经使用谷歌可视化图表和 ComboChart 一段时间了，它总是有效。
我没有更改任何内容，但在加载 ComboChart 时突然收到以下 google 可视化错误消息:无法读取 null 的属性“minorTextOpacity”。
出了什么问题？ Google 是否改变了 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 工作正常。
最佳答案
这可能是'当前'版本中发生的变化。
google.charts.load('current', {'packages':['corechart', 'controls']});
尝试使用以前保存的版本，看看它是否有效。
请参阅release notes ，点击右侧的发布日期即可查看版本号...
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']});
等等...
关于javascript - Google 可视化 ComboChart - 无法读取 null 的属性 'minorTextOpacity'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62236974/