标签: google-visualization

谷歌饼图非常不准确,分别为57%和42%

我有一些饼图的非常基本的数据.

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%.这是我的数据格式的问题还是这是饼图服务的限制?

http google-visualization

2
推荐指数
1
解决办法
420
查看次数

在Google Visualization折线图中创建可点击元素

是否可以将onclick方法附加到Google Visualization折线图中的元素?例如,如果用户点击图表中的点,我想将用户发送到包含更多详细信息的页面.我已经完成了整个文档,无法找到如何执行此操作的示例.

我看到有事件的方法(来自文档),但没有明确的例子它没有多大意义.

谢谢!

google-visualization

2
推荐指数
1
解决办法
1万
查看次数

Google Visualization API中的逗号分隔数据

我正在使用Google Visualization API中的GeoChart来创建包含网站使用信息的动态地图.由于大的度量值(8位数),我需要用逗号分隔这些数字以使地图更具可读性.我编写了一个为这些数字添加逗号的函数,但这会导致绘制地图的API出错.

例如,当逗号分隔3列数据中的1列(国家/地区,访问次数,唯一身份访问者)时,该列的标签将在国家/地区工具提示中删除.逗号分隔2列然后导致整个地图失败,并出现"期望2列"错误.这必须是因为数字字符串中的逗号未被转义,因此导致JSON数组中的错误.我试过插入'\,'而不是常规逗号无济于事.任何解决方案或解决方案?

javascript php jquery json google-visualization

2
推荐指数
1
解决办法
3005
查看次数

Google Chart API线图上的日期错误

因此,我尝试使用Google的Chart API在线图上绘制Tide次数.但是,图表上绘制的点与正确的日期和时间值不对应.

数据的形式为日期时间(x轴)和潮汐高度(y轴).我不确定我是否正确创建了日期时间值,或者API只是做了一些奇怪的事情.

例如,tideTimes数组中的最后一个日期是11月1日,但图表显示12月的数据点,您可以在下面的图片中看到此行为.我添加了下面的代码,以便您重新创建这些错误.

如果有人能告诉我我做错了什么,我将不胜感激. 在谷歌图表api上显示错误的数据点

    <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)

javascript datetime google-visualization

2
推荐指数
1
解决办法
5370
查看次数

在Google Visualization DataTable中更新数据

如何更新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.我怎样才能更新鲍勃的职业?

javascript google-visualization google-datatable

2
推荐指数
1
解决办法
1万
查看次数

Google Chart全屏点击

有没有办法在点击时全屏显示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)

javascript jquery google-visualization

2
推荐指数
1
解决办法
4207
查看次数

Google饼图不适合容器

我正在使用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的问题?

javascript google-api google-visualization pie-chart

2
推荐指数
1
解决办法
4810
查看次数

在Google Charts中使用条形图创建时间轴?

我想用Google图表创建一个时间轴,以显示事件的持续时间,重复次数和重叠次数.每行应该是一个新事件,列应该是时间的增量.

我一直在查看Google Charts文档,但它看起来并不像我想要的那样 - 不仅要有一个水平条的长度,而且要在同一行中有多个远程条(非重叠).

这可以通过Chrome或其他免费图表库实现吗?

编辑:我想生成一个类似于下面的图表在此输入图像描述

javascript charts google-visualization

2
推荐指数
1
解决办法
9664
查看次数

如何使用RequireJS AngularJS和Google Visualization API

想知道是否有人让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

2
推荐指数
1
解决办法
1084
查看次数

当data.addRows来自var时,谷歌图表"给出的行大小不同于"

我试图创建条形图,但由于某种原因,它的工作量.

当我将过去的数据复制到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)

谢谢

三木

javascript google-visualization

2
推荐指数
1
解决办法
1万
查看次数