Tampermonkey 中的 Google 图表无法正常工作

Question

感谢这个社区的所有帮助。我已经成功地通过TampermonKey在某些网页中添加了新的JS功能。现在，我正在尝试显示一个在网页上注入的Google图表。 Chrome浏览器。我一直在尝试几个月，没有快乐。我将所有内容剥离到了最简单的TM脚本，以在Google主页上显示饼图，URL匹配。 DIV是可见的，但没有图表。 JS控制台没有相关错误。

如果不使用TampermonKey，该图表会很好地使其很好。

https://jsfiddle.net/_pirateX/ue88hus0/

I have tried window.onload in various positions ，并在各个地方移动了Google Chart Loader。我尝试使用函数名称drawchart设置负载回调，但没有更改。

任何人都可以协助并告诉我为什么这不起作用。我将永远感激不已。

// @name         Chart Example1
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  try to take over the world!
// @author       You
// @require      https://www.gstatic.com/charts/loader.js
// @match        https://www.google.com
// ==/UserScript==
/* global google */

'use strict';

google.charts.load("current", {packages:["corechart"]});

window.onload = function() {

   var myWrapper = document.createElement('div');
   myWrapper.style.position = 'fixed';
   myWrapper.id = "myChart";
   myWrapper.style.width = '600px';
   myWrapper.style.height = '300px';;
   myWrapper.style.right = '1em';
   myWrapper.style.top= '10em';
   myWrapper.style.background = 'rgba(255, 255, 255, 1)';
   myWrapper.style.border = '2px solid grey';
   document.body.append(myWrapper);

    //put here code
    google.charts.setOnLoadCallback(function() { drawChart()});

    function drawChart() {

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Group');
       data.addColumn('number', 'Gender');
       data.addRows([
          ['Males', 10],
          ['Females', 5]
       ]);

       var options = {'title':'Gender distribution',
                       'width':300,
                       'height':300};
       var chart = new google.visualization.PieChart(document.getElementById('myChart'));
       chart.draw(data, options);
    }
}

Answer 1

google的load语句默认会等待页面加载，
因此您可以使用 load 语句来代替 window.onload

尝试将代码放入 load 语句返回的承诺中...

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
   var myWrapper = document.createElement('div');
   myWrapper.style.position = 'fixed';
   myWrapper.id = "myChart";
   myWrapper.style.width = '600px';
   myWrapper.style.height = '300px';;
   myWrapper.style.right = '1em';
   myWrapper.style.top= '10em';
   myWrapper.style.background = 'rgba(255, 255, 255, 1)';
   myWrapper.style.border = '2px solid grey';
   document.body.append(myWrapper);

   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Group');
   data.addColumn('number', 'Gender');
   data.addRows([
      ['Males', 10],
      ['Females', 5]
   ]);

   var options = {'title':'Gender distribution',
                   'width':300,
                   'height':300};
   var chart = new google.visualization.PieChart(document.getElementById('myChart'));
   chart.draw(data, options);
});

Answer 2

显然，TM加载/使用Google Loader.js的方式存在一些不相容性。在GitHub存储库中，我收到了TM开发人员的答复，如下所示：

加载程序将脚本注入页面中，但是@需要脚本“ Live”在沙盒中。请使用@unwrap使其正常工作。

@unwrap将包括在下一个版本中。同时，测试表明，通过JS加载Google Loader.js也有效：

// ==UserScript==
// @name         Histogram
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Show histogram.
// @author       Me.
// @match        https://match.com*
// @icon         https://www.google.com/s2/favicons?domain=mydomain
// @require      file://D:\mycode.js
// ==/UserScript==
/* global google, injectChartDiv, drawChart */

    'use strict';

// Set up onload callback.
window.onload = drawChart;

// Load the Google charts loader.js
var my_script = document.createElement('script');
my_script.setAttribute('src','https://www.gstatic.com/charts/loader.js');
document.head.appendChild(my_script);

随着我了解有关@UnWrap的更多信息，我将更新此答案。目前，我的图表正在渲染yay！谢谢大家。