YUI3沙盒中的谷歌可视化应用编程接口
YUI3沙盒中的谷歌可视化应用编程接口
提问于 2012-08-16 02:32:29
我正在使用YUI3作为我的应用程序的javascript框架，它已经完成了大约90%。我需要展示一些漂亮的图表，但是YUI3的图表功能还有很多需要改进的地方。
我正在尝试使用谷歌的可视化API在YUI3沙箱中生成绘图，但似乎不起作用。以下是示例代码：
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src = 'build/yui/yui-min.js'></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type='text/javascript'>
var some_foo = function () {
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
/* doing some super-awesome stuff */
/* now trying to show charts with some data */
some_foo();
});
</script>当我将对some_foo()的调用放在YUI3沙箱之外时，代码可以正常工作。但是，当我尝试从YUI3内部调用它时，它不起作用。
我还尝试在YUI3沙箱内、YUI3沙箱外、YUI3沙箱之前和YUI3沙箱之后声明some_foo()。我已经在FF14+和Chrome20+上尝试了代码。
我是不是漏掉了什么？
回答 1
Stack Overflow用户
发布于 2012-09-23 18:33:33
@KingJulian，不确定你现在是否已经有答案了。我将脚本从"some_foo“函数移到了”google.load('visualization', '1', {packages:['gauge']});“标记中，它起作用了。
下面的代码对我很有效：
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
</script>
<script type='text/javascript'>
var some_foo = function () {
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
some_foo();
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11975002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号