Google Visualization ComboChart - 无法读取null的'minorTextOpacity'属性。

问题描述 投票:1回答:1

我使用谷歌可视化图表与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工作没有问题。

javascript charts google-visualization
1个回答
1
投票

这可能是一些东西,改变了在 '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']});

等等...

© www.soinside.com 2019 - 2024. All rights reserved.