我已经下载了http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-visualization-1.1.0.zip&can=2&q=存档附带的jar文件,以便在GWT中使用图表.在存档中也是示例应用程序(http://gwt.google.com/samples/hellovisualization-1.1.0/HelloVisualization.html).但这个例子对我不起作用.它在此行有一个运行时错误:DataTable data = DataTable.create();
Eclipse报告此:com.google.gwt.core.client.JavaScriptException:(TypeError):无法读取未定义的属性"DataTable".
这有什么不对?
以下代码作为独立页面可以正常工作.但如果将其合并到我的PHP Web应用程序中,则会引发错误.如果在谷歌图表JS中发生错误如何调试?任何建议都会有所帮助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="myGraphLabel" onclick="drawColumnChart();">
My Column Chart
</div>
<div id="myColumnChart" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function drawColumnChart() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(2);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11); …Run Code Online (Sandbox Code Playgroud) 我正在我的一个项目中忙于使用Google Charts在表格中显示数据.一切都很好.除非我需要查看用户点击按钮后选择的行.
显然这可以通过Javascript来完成,但我已经苦苦挣扎了好几天无济于事.下面我粘贴了一个表的简单示例的代码,以及我想要使用的Javascript函数(这不起作用).
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
var table = "";
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows(4);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Jim');
data.setCell(1, 1, 8000, '$8,000');
data.setCell(1, 2, false);
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 12500, '$12,500');
data.setCell(2, 2, true);
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 7000, '$7,000');
data.setCell(3, 2, true);
table = new …Run Code Online (Sandbox Code Playgroud) 我有一个情况,我有一个下拉的PHP文件'A'.当我从该下拉列表中选择一个值时,进行ajax调用并触发不同的php文件B. 在那个文件中,我做数据库提取,并形成两个json对象.这两个json对象是我需要绘制2个不同的数据表和2个不同的图表.
当我在'B'中回应一个json对象时,我将其作为对'A'中ajax调用的响应
如果我在B中回显两个json对象,我甚至无法得到响应.
对于单个json对象响应,我可以绘制datatable并可以使用javascript操作json对象并希望绘制图表
请告知如何处理这种情况来自文件B的代码
$json = json_encode($tot_categ);
$json_percent = json_encode($tot_que_percent);
$cols_percent = array(
array( 'id' => 't', 'label' => 'Title', 'type' => 'string'),
array( 'id' => 'n', 'label' => 'Neutral(+) ', 'type' => 'string'),
array('id' => 'a', 'label' => 'Agree', 'type' => 'string'),
array('id' => 'ne', 'label' => 'Neutral(-)', 'type' => 'string'),
array('id' => 'd', 'label' => 'Disagree', 'type' => 'string'),
);
$jcols_percent = json_encode($cols_percent);
//JSON format accepted by Google tables
$r_percent= "{cols:".$jcols_percent.','."rows:".$json_percent."}";
//echo (JSON.stringify($r_percent));
// echo $r_percent; …Run Code Online (Sandbox Code Playgroud) 如果图表是由JSON数据创建的,那么关于如何设置动画的所有示例都不会涵盖.他们都使用静态数据.(参见过渡动画.)
这是我通过JSON获取数据的代码.
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.post('/Weight/WeightAreaChartData', {}, function (data) {
var tdata = new google.visualization.arrayToDataTable(data);
var options = {
title: 'Weight Lost & Gained This Month',
hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
chartArea: { left: 50, top: 30, width: "75%" },
colors: ['#FF8100'],
animation:{
duration: 1000,
easing: 'in'
},
};
var chart = new …Run Code Online (Sandbox Code Playgroud) 我有一个简单的Google可视化仪表板示例,其中包含一个categorypicker控件和一个表.我的代码如下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['Metric', 'Value'],
['CPU' , 12],
['Memory', 20],
['Disk', 7],
['Network', 54]
]);
// Define a category picker for the 'Metric' column.
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'Metric',
'ui': {
'allowTyping': false,
'allowMultiple': true,
'selectedValuesLayout': …Run Code Online (Sandbox Code Playgroud) 我正在开发一个项目,我正在使用Google Charting API,我想使用json填充图表来构建数据表.
作为一个测试,我试图在尝试使用数据库中的动态数据之前构建一个简单的数组,但是我遇到了以正确格式获取json的问题.
在谷歌文档中,它说json内容应该在以下内容:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
Run Code Online (Sandbox Code Playgroud)
我正在调用一个返回json代码的函数.
下面是调用函数的方法
print json_encode(test());
Run Code Online (Sandbox Code Playgroud)
而测试功能是
function test()
{
$array = array();
$array['cols'][] = "20-01-13";
$array['cols'][] = "21-01-13";
$array['cols'][] = "22-01-13";
$array['rows'][] = 22;
$array['rows'][] = 26;
$array['rows'][] = 12;
return $array;
}
Run Code Online (Sandbox Code Playgroud)
生成图表的javascript如下
<script>
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "loadGraph.php", …Run Code Online (Sandbox Code Playgroud) 我正在使用Google可视化的LineChart来显示一些数据(它可以正常工作).
的图表显示了性能试验的结果和那些结果应该不超过某个值(例如,响应时间应不超过20ms).Si我想绘制最大值(我猜的水平线),而不必添加新的(虚拟)数据系列.
那可能吗?
非常感谢,
阿尔班
我是Google Apps脚本的新手,所以我只是在探索我想实现的目标.
在Google表单中,我需要检索并在单独的文档中显示根据每个表单提交的数据创建的图表.我知道这可以做到.
我遇到的问题是我想要的图表类型似乎在这里不可用.
图表需要显示一个类别和两个值.这可以用条形图来完成,高度是一个值,颜色是另一个值 - 这看起来好像可能但我不确定整个条的颜色是否可以改变.
另一种方法是气泡图,X轴代表类别,Y轴代表一个值,大小代表另一个值 - 但似乎不支持这种类型的图表.
我正在考虑使用谷歌图表来分散情节.所有示例都具有外部依赖性,我想避免这种情况,因为这是一个没有外部Internet访问的Intranet应用程序.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
...
</script>
Run Code Online (Sandbox Code Playgroud)
我可以简单地在本地复制loader.js,还是有一些我需要担心的更复杂的问题?我问的原因是我尝试这样做而且没有用,所以我试图弄清楚我所做的事情是否存在根本缺陷或者我可能会遇到一个无关紧要的问题.