Chrome 中的 Google 可视化/图表 - 需要插件吗？答案

【问题标题】：Google Visualization/Charts in Chrome - Plugin Required?Chrome 中的 Google 可视化/图表 - 需要插件吗？
【发布时间】：2023-03-07 18:16:01
【问题描述】：

我们正在使用 AngularJS 构建一个新界面，并且至少其中一个模块将具有图表。到目前为止，我一直在尝试 Google Charts，它在本地 NodeJS 服务器（通过 WebStorm）和我们的持续开发服务器上都对我很有效，但是对于团队中的其他人来说，图表没有显示在其中任何一个上.

饼图

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
    ['Pears', 10.5],
    ['Apples', 16.5],
    ['Bananas', 5]
]);

// Set chart options
var options = {'title':'Fruits',
    'width':420,
    'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_1'));
chart.draw(data, options);
}

正如您在代码中看到的，我已经有了 google.setOnLoadCallback(drawchart);正如Google Visualization chart not showing up thanks to CSS 中所建议的那样。

我已尝试下载 Google 的 JSAPI 和其他东西并将其包含在项目中，但对其他人没有区别。

我们所有人都在使用谷歌浏览器。我用我的 gmail 登录，我认为其他人也是如此。所以它一定是我在我的 Google Chrome 浏览器中拥有而他们没有的东西。

知道这可能是什么吗？

编辑

这是我的JSFiddle，它有确切的解决方案，但我已经更改了一些内容，例如由于完整性而导致的变量和数据......

【问题讨论】：

我没有看到该代码中有任何问题。您的开发网站是否有面向公众的版本可供我访问以对其进行测试？如果没有，您能否发布一个对您有用但对您的同事无效的完整 HTML 示例？
在底部添加了一个 JSFiddle... 我不确定他们是否可以看到 JSFiddle 中的图表。他们目前都在休假，但可以在下周（2013 年 7 月 29 日）进行测试。
如果你的代码在项目中的结构是这样的，我看不出有什么理由不适合你的同事。据我所知，Angular 和 Google 可视化 API 之间不存在可能导致问题的冲突。我建议您遵循 George 的以下建议，并在您同事的 PC 上进行错误检查，以查看 Chrome 开发人员控制台中是否出现任何错误消息。
将在下周至少有一名团队成员回来时执行此操作。我还考虑了 SVG。如果由于某种原因返回为空，我将检查开发人员工具是否有 SVG 标签。

标签： google-chrome angularjs google-visualization

【解决方案1】：

我将您的代码复制粘贴到一个文件中，它加载并显示对我来说很好，所以很难说可能出了什么问题。我可以提出一些建议来帮助您调试它。

1) 尝试将您的代码单独放入一个文件并加载该文件。如果行为不同，那么它在您的设置中。

2) 尝试在“隐身”窗口中打开它。这将消除大多数可能造成破坏的 Chrome 扩展程序。

3) 加载页面时打开控制台，查看是否有任何有用的错误消息。

4) 加载页面时打开“网络”面板，查看是否有任何有用的错误消息。

【讨论】：

我已经完成了第 1 个项目符号。这并没有做任何额外的事情。 Nr 2 导致图表未在我的浏览器中加载。我在控制台中得到以下信息（隐身时）：未捕获的错误：未定义容器格式+en，default，corechart.I.js：882 FC format+en，default，corechart.I.js：882 KC format+en，默认,corechart.I.js:883 cD 格式+en,默认,corechart.I.js:891 drawChart ;我拥有的每个图表都有一组。那么它必须是一些设置。觉得奇怪的是，谷歌图表在他们自己的浏览器的“默认模式”下不受支持。
在 JSFiddle 上发现了一些东西。如果使用外部（google.com/jsapi?ext.js），Google JSAPI 似乎可以工作......请参阅jsfiddle.net/Pixic/4kkpm。并且不适用于普通的 JSAPI (google.com/jsapi) ...请参阅 jsfiddle.net/Pixic/4kkpm。两者都可以在我的应用程序中使用，但可以在普通的 Chrome 浏览器中使用，并且它们都不能在隐身模式中使用。我将暂时保留“外部”，我们将看看我的同事度假回来后它是否对他们有用……但如果有人提出解决方案，我仍然很感激。 =)
仅供参考，jsfiddle 的问题不在于 ext 与普通的 jsapi 调用，而是 jsfiddle 解析链接以在末尾寻找扩展，因此它可以确定它正在加载什么样的资源。如果 URL 不以“.js”或“.css”（或其他可识别的扩展名）结尾，jsfiddle 将忽略它。如果你使用google.com/jsapi?jsfiddleFix=.js，它也可以。
好的，感谢您的解释。那我想一定是别的原因，为什么我的同事不工作。

【解决方案2】：

找到解决方案...

问题似乎在于，在我的情况下，我很幸运地让图表加载了数据，而其他人得到了图表，但没有及时得到数据，因此图表出错了。意思是，某种时间问题。

解决方案是使用Angular Google Chart Directive (Demo of it)。实施后，我的同事也可以看到图表。

然后我们还在其上实现了 i18next 以根据用户语言对图表进行格式化，但这是另一回事...

【讨论】：