标签: google-visualization

是否有像谷歌图表这样的SVG地图库?

我正在寻找可以按国家划分的大型世界地图.Google Charts有一个API,但它只允许您生成一个小地图(440x220像素).有谁知道用开源库生成这样的地图的方法?

javascript maps svg google-maps google-visualization

11
推荐指数
2
解决办法
9495
查看次数

如何使用谷歌图表api创建直方图?

除了使用柱形图并正确命名之外,是否可以在谷歌图表API中创建直方图?

google-visualization

11
推荐指数
3
解决办法
9002
查看次数

使用谷歌的邮政编码距离

我有两个邮政编码列表(在R中)...其中一个孩子的地址与他们的学业成绩和一个学校......

我希望能够为每个孩子获得最近的学校......所以大概是通过转换为长期和纬度值来计算邮政编码之间的距离?

然后我希望能够在谷歌地图上绘制每所学校的所有孩子......并看看住在离学校较近的孩子是否能获得更好的成绩......或许可以为孩子和孩子们设置不同颜色的学校根据他们的分数有一个渐变的颜色?

也许是使用googleVis包的东西?

所以例如......

如果我们有3个孩子和2所学校的数据......

student.data <- cbind(post.codes=c("KA12 6QE", "SW1A 0AA", "WC1X 9NT"),score=c(23,58,88))
school.postcodes <- c("SL4 6DW", "SW13 9JT")
Run Code Online (Sandbox Code Playgroud)

(注意我的实际数据明显大于给定的数据,因此可扩展性很有用......)

应该怎么做googleVis或任何其他包,以便能够完成上述?

google-maps r google-visualization google-maps-api-3

11
推荐指数
1
解决办法
2144
查看次数

如何在谷歌图表中更改注释文本的颜色

如何更改Google Chart Tools LineChart中注释文本的颜色?

这是一个例子

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();      
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
    data.addRows([
        [new Date(2012, 3, 5), 80, null],
        [new Date(2012, 3, 12), 120, 'New Product'],
        [new Date(2012, 3, 19), 80, null],
        [new Date(2012, 3, 26), 65, null],
        [new Date(2012, 4, 2), 70, null],
    ]);

    var options = {
        title: 'Sales by Week',
        displayAnnotations: true,
        hAxis: {title: 'Date', 
                titleTextStyle: {color: 'grey'}},
        colors: …
Run Code Online (Sandbox Code Playgroud)

google-visualization

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

在php mysql中使用Google Chart API显示条形图

我一直在寻找这个.我得到了解决方案.在这里.它是在php中使用AJAX完成的.我有两个页面是googleapi.php和其他getData.php,它是由googleapi.php发送的AJAX请求使用的.

googleapi.php

 <html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    //google.setOnLoadCallback(drawChart);

    function drawChart(object) {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(object);
      var options = {
           title: 'Test API',
          is3D: 'true',
          width: 200,
          height: 100
        };
      // Instantiate and draw …
Run Code Online (Sandbox Code Playgroud)

php mysql ajax google-api google-visualization

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

Google的时间轴图表中的颜色根据特定值显示

我想为酒吧创建一组颜色.以下示例是raw.我想添加一个类别类型的列,并根据该类别我将为该栏添加颜色.

就像是:

dataTable.addColumn({ type: 'string', id: 'Category' });
Run Code Online (Sandbox Code Playgroud)

线

[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ], …
Run Code Online (Sandbox Code Playgroud)

google-visualization

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

Angular2 + Google Charts.如何在Angular2中集成Google Charts?

我想在我的Angular2应用程序中集成G​​oogle Charts.这样做的方法是什么?有没有可用的例子?

我尝试加载像谷歌图表演示的包,但我有加载问题.我尝试了angular2-google-chart ...但是没有设法让它工作.

谢谢你的帮助.

google-visualization angular

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

在php文件中执行Google Chart API(Javascript)

我在php中创建一个邮件,在wordpress插件中,并希望包含由谷歌图表api创建的图像.我尝试了以下方法:

<?php
$message.= <<<HTML

      <script>
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 660, 1120],
            ['2016', 1030, 540]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: {
                title: 'Year',
                titleTextStyle: {
                    color: '#333'
                }
            },
            vAxis: {
                minValue: 0
            }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    HTML;   

        $message.=<<<HTML

<h1> test message </h1>
    HTML;   

    $to = "test@test.com";
    $subject …
Run Code Online (Sandbox Code Playgroud)

javascript php wordpress google-visualization

11
推荐指数
4
解决办法
1419
查看次数

当Google Chart包含在基于jQuery的选项卡中时,它会加载极小的内容

我正在使用谷歌的折线图几乎完全像演示 - 只有数据已经​​改变 - 在这个jQuery选项卡插件内部没有修改.可能有50%的时间,图表将加载400x200,即使它被指定加载到700x250.包含div将具有适当的宽度和高度,但由API呈现的图表将在400x200内加载.

我怀疑这是因为API尝试渲染时没有显示选项卡.因此,它尝试渲染它认为为null的东西,因此强制自己进入最小的默认分辨率.

我的想法是,如果图表的显示可以延迟,直到单击相应的选项卡,它将解决问题.可悲的是,我不知道该怎么做,而且我的研究也没有成果.我能找到的最接近的是这个帖子,但我没有找到任何真正的答案.

如果您有任何建议我会很感激,如果有必要,我很乐意跟进更多信息.

javascript jquery charts tabs google-visualization

10
推荐指数
2
解决办法
3836
查看次数

在谷歌图表中,图例指示符颜色不会随条形颜色而变化

我正在使用Google图表.我想改变图表中的条形颜色.所以使用系列风格我改变了条形颜色.但同时我想根据条形颜色更改Legend指示灯颜色.但我无法更改图例指示灯颜色.请帮我.

这是图表代码:

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart3);
      function drawChart3() {
          var data = google.visualization.arrayToDataTable([
            ['Priority', 'Resolution(%)',{ role: 'annotation' },'ESL(%)',{ role: 'annotation' },{ role: 'style' }],
            ['P1', <%=P1_PERCENT %>,<%=P1_PERCENT%>,95,95,'color: #fcb441' ],
            ['P2', <%=P2_PERCENT%>,<%=P2_PERCENT%>,95,95,'color: #fcb441' ],
            ['P3 & P4', <%=P3_P4_PERCENT%>,<%=P3_P4_PERCENT%>,90,90,'color: #fcb441' ]
            ]);

        var options = {
          tooltip:{textStyle:{fontName:'"Arial"'}},
          title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
          hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
          vAxis: {minValue:0},
          legend:{position: 'bottom'},
          chartArea:{width:'88%'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('g4'));
        chart.draw(data, options);
      }
Run Code Online (Sandbox Code Playgroud)

我得到这样的图表

结果图表

google-visualization

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