Google 可视化组合图 - 无法读取属性 'minorTextOpacity' 的 null

Question

我一直在使用 ComboChart 的 google 可视化图表，它一直有效。

我没有做任何更改，但在加载我的 ComboChart 时突然收到以下 google 可视化错误消息：Cannot read property 'minorTextOpacity' of null.

怎么了？ 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>

注意：折线图工作正常。

Answer 1

它可能在 'current' 版本中发生了变化。

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']});

等...

Google 可视化组合图 - 无法读取属性 'minorTextOpacity' 的 null

Google Visualization ComboChart - Cannot read property 'minorTextOpacity' of null

javascript

charts

google-visualization

Google 可视化组合图 - 无法读取 属性 'minorTextOpacity' 的 null

Google Visualization ComboChart - Cannot read property 'minorTextOpacity' of null

javascript

charts

google-visualization

Google 可视化组合图 - 无法读取属性 'minorTextOpacity' 的 null