Google Tampermonkey 中的图表不工作

Question

感谢这个社区提供的所有帮助。我已经成功地使用 Tampermonkey 向一些网页添加了新的 JS 功能。现在我正在尝试显示在网页上注入的 Google 图表。 Chrome 浏览器。我断断续续试了好几个月了，一点都不开心。我将所有内容剥离到最简单的 TM 脚本以显示饼图，URL 匹配 Google 主页。 DIV 可见，但未呈现图表。 JS 控制台中没有相关错误。

如果不使用 Tampermonkey，图表可以正常呈现。

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

我在各个位置尝试了 window.onload，并在各个位置移动了 Google 图表加载器。我尝试使用函数名 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 语句代替 window.onload

尝试将代码放入 promise 加载语句 returns...

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 loads/uses Google loader.js 的方式存在一些不兼容性。在 Github 仓库中，我得到了 TM 开发者的回复如下：

The loader injects a script into the page, but the@require'd script "lives" inside the sandbox. Please use @unwrap to make it work.

@unwrap 将包含在下一个版本中。同时测试发现通过JS加载Googleloader.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 的信息后更新此答案。现在，我的图表正在渲染耶！谢谢大家。

Google Tampermonkey 中的图表不工作

Google Charts in Tampermonkey Not Working

charts

google-visualization

tampermonkey