Google Visualization Display Issue

2019-02-28 15:29发布

问题:

I am using Google Charts Visualization API in my application and have encountered a problem whereby the charts are failing to load.

The problem first occurred when I loaded my application without making any prior changes from a working copy and the Javascript Charts were not loaded on the page. I checked the Chrome and FireFox console errors and they are as follows:

Firefox: ReferenceError: dr is not definedin loader.js
Chrome: Uncaught TypeError: google.visualization.PieChart is not a function

Here is my code for drawing my two charts.

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                <script type="text/javascript">
                    google.charts.load('current', { 'packages': ['corechart', 'table'] });


                    google.charts.setOnLoadCallback(drawChart);
                    function drawChart() {


                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Signatures');
                        data.addColumn('number', 'Number of Occurence');

                        for (i = 0; i < num.length; i++) {
                            data.addRow([num[i], parseInt(num[i + 1])]);
                            i++;
                        }


                        var options = {
                            title: 'Top 5 Alerts'
                        };

                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                        chart.draw(data, options);
                    }
                </script>

Here is the JQuery I load within the head of the page.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

After digging around and heading to the Google Charts official site here:

https://developers.google.com/chart/interactive/docs/gallery/piechart

I noticed the PieChart Google is attempting to load for their example will not work on my machine either with the same Firefox and Chrome console errors.

I am not sure where to go from here and was wondering if mayby Google could be blocking my IP from loading the API or such?

Or if settings have been changed which are now preventing the charts from loading?

Any insight into why this might be happening would be a great help.

回答1:

you may be experiencing problems from the latest release...

It appears that when we push out a new version, there are some hiccups in the system until the changes fully propagate. We will be working to fix this in the future, but for now, if you get these kinds of errors, I suggest you refresh the page, flushing your cache if necessary.
You can also change 'current' to '43' or '44' and it will work more reliably.

found from here --> Google Visualization Charts API examples are broken

this example works for me in Chrome, don't see any differences, is there more code you can share?

I've also seen problems loading both JQuery and GoogleCharts

google.charts.load('current', {
  packages: ['corechart', 'table']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Signatures');
  data.addColumn('number', 'Number of Occurence');

  for (i = 1; i < 11; i++) {
    data.addRow([i.toString(), parseInt(i + 1)]);
  }

  var options = {
    title: 'Top 5 Alerts'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>