我有一些饼图的非常基本的数据.
Yes: 189.84 (57.03%)
No: 252 (42.97%)
Abstain: 0 (0%)
Run Code Online (Sandbox Code Playgroud)
当我通过以下网址请求谷歌饼图时:http://chart.apis.google.com/chart?tt = p&chs = 400x200&chl = Yes%2042.97%| No.%2057.03%| Abstain%200%&chd = t: 189.94 ,252,0&chdl = 189.84 | 252 | 0&CHCO = FF0000
...看起来非常像每个彩色部分正好是50%,即使一个是42%而另一个是57%.这是我的数据格式的问题还是这是饼图服务的限制?
是否可以将onclick方法附加到Google Visualization折线图中的元素?例如,如果用户点击图表中的点,我想将用户发送到包含更多详细信息的页面.我已经完成了整个文档,无法找到如何执行此操作的示例.
我看到有事件的方法(来自文档),但没有明确的例子它没有多大意义.
谢谢!
我正在使用Google Visualization API中的GeoChart来创建包含网站使用信息的动态地图.由于大的度量值(8位数),我需要用逗号分隔这些数字以使地图更具可读性.我编写了一个为这些数字添加逗号的函数,但这会导致绘制地图的API出错.
例如,当逗号分隔3列数据中的1列(国家/地区,访问次数,唯一身份访问者)时,该列的标签将在国家/地区工具提示中删除.逗号分隔2列然后导致整个地图失败,并出现"期望2列"错误.这必须是因为数字字符串中的逗号未被转义,因此导致JSON数组中的错误.我试过插入'\,'而不是常规逗号无济于事.任何解决方案或解决方案?
因此,我尝试使用Google的Chart API在线图上绘制Tide次数.但是,图表上绘制的点与正确的日期和时间值不对应.
数据的形式为日期时间(x轴)和潮汐高度(y轴).我不确定我是否正确创建了日期时间值,或者API只是做了一些奇怪的事情.
例如,tideTimes数组中的最后一个日期是11月1日,但图表显示12月的数据点,您可以在下面的图片中看到此行为.我添加了下面的代码,以便您重新创建这些错误.
如果有人能告诉我我做错了什么,我将不胜感激.

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawWeekChart);
function drawWeekChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Wave Height (Meters)');
var tideTimes = [
[new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
[new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
[new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
[new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
[new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
[new …Run Code Online (Sandbox Code Playgroud) 如何更新Google可视化数据表中的数据?例:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Occupation');
data.addRow(['Bob', 'Shoe Wearer']);
data.addRow(['Henry', 'Transformer']);
data.addRow(['Betty', 'Seltzer Connoisseur']);
// Time passes and Bob changes jobs:
data.addRow(['Bob', 'Beach Comber']);
Run Code Online (Sandbox Code Playgroud)
当然,这增加了一个新行,现在我有两个Bobs.我怎样才能更新鲍勃的职业?
有没有办法在点击时全屏显示Google Chart?
我已经玩了好几个小时了
JS -
$('#chart_div').on('click', function(e) {
$(this).css({
width: "100%",
height: "100%",
margin: "0",
border: "none"
});
});
Run Code Online (Sandbox Code Playgroud)
CSS -
#chart_div {
width: 100 px;
height: 100 px;
margin: 20 px;
background - color: red;
border: 1 px solid black;
}
body, html {
height: 100 % ;
}
Run Code Online (Sandbox Code Playgroud)
HTML - 您可以根据Apache许可证的条款(http://www.apache.org/licenses/LICENSE-2.0.html)自由复制和使用此示例
<!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>
<script type="text/javascript" …Run Code Online (Sandbox Code Playgroud) 我正在使用Google Chart API,并开发了一个饼图,参考了 可视化:饼图
我的饼图的截图: -

屏幕截图显示了通过firebug的容器......
这里出现了问题,低不透明度蓝色是图表出现的容器(即div),有些不适合它所包含的外部div并显示一些无用的空白,饼图应该是如果我的代码是正确的,无论如何都适合div ...
处理此代码: -
var options_pie = {
chartArea: { left: 0, top: 0, width: "100%", height: "60%"},
colors: ['#59ea54', '#a14660', '#f3cf4a', '#16a2c2', '#ce7374', '#39ae9b'],
legend: 'none',
};
var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie'));
chartPie.draw(data, options_pie);
Run Code Online (Sandbox Code Playgroud)
我不知道,我错过了什么或api的问题?
我想用Google图表创建一个时间轴,以显示事件的持续时间,重复次数和重叠次数.每行应该是一个新事件,列应该是时间的增量.
我一直在查看Google Charts文档,但它看起来并不像我想要的那样 - 不仅要有一个水平条的长度,而且要在同一行中有多个远程条(非重叠).
这可以通过Chrome或其他免费图表库实现吗?
编辑:我想生成一个类似于下面的图表
想知道是否有人让RequireJS,ANgularJS和Google Visualization API一起工作.我似乎无法使图表正常运行.我遇到的主要问题是google.setOnLoadCallback()没有运行.下面是我的代码.如果有另一个图表库更容易使用RequireJS,我不会完全在Google Visualization API上出售.
define([ 'jquery'],function ( $) {
return function () {
return {
restrict: 'A',
link: function (scope, lElement, attrs) {
console.log("loaded google jsapi");
console.log("google");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
console.log("we are in the call back");
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(lElement[0]); …Run Code Online (Sandbox Code Playgroud) google-visualization requirejs angularjs angularjs-directive
我试图创建条形图,但由于某种原因,它的工作量.
当我将过去的数据复制到data.addRows方法时它工作正常,但当我将数据插入var rawData im接收时
Row given with size different than 8 (the number of columns in the table).
Run Code Online (Sandbox Code Playgroud)
这是代码:
data.addColumn('number', 'Time');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[rawData]]);
Run Code Online (Sandbox Code Playgroud)
这是console.log(rawData)的值;
[8,0,0,0,0,0,0,2],[9,0,0,3,0,1,0,2],[10,0,0,20,0,1,0,7],[11,13,0,24,2,7,0,16],[12,0,1,23,2,3,0,1],[13,2,4,31,2,0,0,6],[14,0,0,53,0,2,0,4],[15,0,1,57,2,2,0,13],[16,0,0,46,0,7,0,6],[17,0,0,61,0,0,0,7],[18,0,0,15,3,2,0,3],[19,0,0,0,1,0,0,182],[21,0,2,0,0,0,0,305],[23,0,0,0,0,6,0,1]
Run Code Online (Sandbox Code Playgroud)
谢谢
三木