未捕获的TypeError:google.visualization.LineChart

时间:2016-02-28 08:27:00

标签: javascript jquery google-visualization

您好我的控制台中有Uncaught TypeError: google.visualization.LineChart

我的代码在今天之前正在运作。

这是我的2个谷歌折线图的完整代码:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Muli:400,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>//<![CDATA[
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChart2);
    function drawChart() {
      var chartDiv = document.getElementById('chart_div');
      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'Month');
      data.addColumn('number', "Total Donation Ratio");
      data.addColumn('number', "Total Trophies");
      data.addRows([
[new Date(2016, 1, 28, 1, 45), 0.4815,  48592], 
[new Date(2016, 1, 28, 15, 01), 0.4963,  48693], 
[new Date(2016, 1, 28, 16, 02), 0.4963,  48711], 
[new Date(2016, 1, 28, 16, 02), 0.4963, 48711]
]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);   
      var classicOptions = {
      crosshair: { trigger: 'both' },
        title: 'Total Donation Ratio and Total Trophies',
        textStyle: {
            fontName: 'Muli'
        },
        titleTextStyle: {
            fontName: 'Muli'
        },
        height: 450,
        series: {
          0: { //Donation
            targetAxisIndex: 0,
            pointSize: 5,
            lineWidth: 5,
            curveType: 'function'
            },
          1: { //Trophies
          targetAxisIndex: 1,
          pointSize: 3,
          lineWidth: 4,
          curveType: 'function',
          color: '#b8860b'
          }
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Donation Ratio'},
          1: {title: 'Trophies'}
        },
        hAxis: {
            title: 'Timeline (GMT +8)',
            textStyle: {
                fontName: 'Muli'
            },
            titleTextStyle: {
                fontName: 'Muli',
                fontSize: 18,
                italic: false
            }
        },
        vAxis: {
            textStyle: {
                fontName: 'Muli'
            },
            titleTextStyle: {
                fontName: 'Muli',
                fontSize: 20,
                italic: true,
                bold: true
            }
        }
      };
      var classicChart = new google.visualization.LineChart(chartDiv);
      classicChart.draw(data, classicOptions);
    }

    // CHART 2
    function drawChart2() {
      var chartDiv2 = document.getElementById('chart_div2');
      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'Month');
      data.addColumn('number', "Troops Donated");
      data.addColumn({type: 'number', role:'annotation'});
      data.addRows([
[new Date(2016, 1, 27, 16, 45), 73, 73], 
[new Date(2016, 1, 27, 17, 15), 7, 7], 
[new Date(2016, 1, 27, 18, 15), 60, 60], 
[new Date(2016, 1, 27, 18, 45), 50, 50], 
[new Date(2016, 1, 27, 20, 15), 56, 56], 
[new Date(2016, 1, 27, 20, 45), 90, 90], 
[new Date(2016, 1, 27, 21, 15), 20, 20], 
[new Date(2016, 1, 27, 22, 15), 76, 76], 
[new Date(2016, 1, 27, 22, 45), 10, 10], 
[new Date(2016, 1, 27, 23, 15), 45, 45], 
[new Date(2016, 1, 27, 23, 45), 6, 6], 
[new Date(2016, 1, 28, 1, 45), 61, 61], 
[new Date(2016, 1, 28, 15, 01), 652, 652], 


]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);   
      var classicOptions = {
      //backgroundColor: '#f7f7f7',
      legend: { position: 'top', alignment: 'start' },
        title: 'Troops Donated in the Last 24 Hours',
        textStyle: {
            fontName: 'Muli'
        },
        titleTextStyle: {
            fontName: 'Muli'
        },
        height: 250,
        series: {
          0: {
            pointSize: 8,
            lineWidth: 3,
            curveType: 'function',
            color: '#001f3f'
            }
        },
        vAxes: {
          0: {title: 'Troops Donated'},
        },
        hAxis: {
            title: 'Timeline (GMT +8)',
            textStyle: {
                fontName: 'Muli'
            },
            titleTextStyle: {
                fontName: 'Muli',
                fontSize: 18,
                italic: false
            }
        },
        vAxis: {
        viewWindow: {
            min: [0]
            },
            textStyle: {
                fontName: 'Muli'
            },
            titleTextStyle: {
                fontName: 'Muli',
                fontSize: 20,
                italic: true,
                bold: true
            }
        }
      };
      var classicChart2 = new google.visualization.LineChart(chartDiv2);
      classicChart2.draw(data, classicOptions);
    }

//]]> 
</script>
</head>
<body>
<div id="chart_div2"></div>
<div id="chart_div"></div>
</body>

这是我的小提琴手https://jsfiddle.net/4nsas23k/

我按照谷歌图表文档中的示例进行操作。知道什么是错的吗?

1 个答案:

答案 0 :(得分:0)

刚刚发现他们有更新......

  

看来,当我们推出新版本时,会有一些小问题   在系统中,直到变化完全传播。我们将努力   将来解决这个问题,但是现在,如果你遇到这些错误,   我建议你刷新页面,如有必要,刷新你的缓存。您   也可以改变当前的&#39;到&#39; 43&#39;或者&#39; 44&#39;它会更有效   可靠。

将其更改为44 google.charts.load('44',对我有用!

感谢SauceLabs