1

我们正在使用 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); 正如谷歌可视化图表中所建议的那样，由于 CSS 没有出现。

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

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

知道这可能是什么吗？

编辑

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

4

2 回答 2

1

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

1）尝试将您的代码单独放入一个文件并加载它。它的行为是不同的，那么它是你的设置中的东西。

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

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

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

于 2013-07-22T14:09:56.240 回答
0

找到解决方案...

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

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

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

于 2013-07-30T14:56:18.297 回答