标签: google-visualization

Google Chart - 在点上显示数据注释 - 交互式折线图

我需要在折线图上显示数据点,即鼠标悬停在一个点上,我需要它们全部默认显示,而不是鼠标悬停.有线索吗？

google-visualization

Sye*_*sar

lucky-day

2
推荐指数

1
解决办法

8610
查看次数

试图通过jQuery ajax调用加载Google图表

最初发布在这里:尝试通过(jQuery)ajax调用加载谷歌图表, 但已经修改了我的代码但我仍然无法让它正常工作.

我正在尝试编写一个轮询函数来加载结果并将其显示在同一页面中而不刷新.我正在使用谷歌图表api和jquery ajax.

主页我有这个:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
    google.setOnLoadCallback(function(){  $("#poll_yes").removeAttr('disabled'); });

    function drawChart(rows) 
    {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Answers');
        data.addColumn('number', 'Number');
        data.addRows(rows);


        // Set chart options
        var options = 
        {
            'title'             :'Do you Like my poll?',
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);              
    }       

    jQuery(document).ready(function() {
        $.ajaxSetup ({  
            cache: false  
        }); 
        var ajax_load = "<img src='images/loading.gif' alt='loading...' …

Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery google-visualization

Zak*_*ziz

2017 05-23

2
推荐指数

1
解决办法

7495
查看次数

GWT折线图选项

我需要在图表中为不同的系列设置不同的线宽.这可以使用http://code.google.com/intl/sv-SE/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options中的系列选项来完成.但是这个选项在GWT中不可用,这导致了我的问题.

我可以:

为GWT编写一个包装器.http://code.google.com/p/gwt-google-apis/wiki/VisualizationNewWrapper
使用Options.set(...)方法.http://gwt-google-apis.googlecode.com/svn/javadoc/visualization/1.1/com/google/gwt/ajaxloader/client/Properties.html#set%28java.lang.String,%20com.google.gwt .core.client.JavaScriptObject 29%

这两种替代方案的问题在于,当系列选项获取对象时,我不知道该怎么做:

series: [{color: 'black', visibleInLegend: false},{}, {}, {color: 'red', visibleInLegend: false}]
series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}

Run Code Online (Sandbox Code Playgroud)

我该怎么做呢？

gwt linechart google-visualization jsni

Gar*_*ryF

lucky-day

2
推荐指数

1
解决办法

2264
查看次数

Google AnnotatedTimeLine DateTime JSON错误

我在尝试使用Google Charts API构建带注释的时间线图时遇到问题.

在JSON中,对于第一个"日期"列,如果我使用:

"v": new Date(2010, 01, 01)

然后我从我的页面收到一个JavaScript错误,说我有无效的JSON.

如果相反我使用:

"v": "new Date(2010, 01, 01)"然后我得到了错误TypeError: 'undefined' is not a function (evaluating 'M[y]()').

我的JavaScript代码只是对Pie Graph的示例代码的修改,该代码位于:http://code.google.com/apis/chart/interactive/docs/php_example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="scripts/jquery-1.6.2.js"></script>
    <script type="text/javascript">

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

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

    function …

Run Code Online (Sandbox Code Playgroud)

javascript datetime json google-visualization

jac*_*ton

lucky-day

2
推荐指数

1
解决办法

2775
查看次数

具有HighCharts的多个系列时间轴

想要看看这张图表是否可以在跳过任何JS图表库之前使用HighCharts - 所有建议都非常赞赏,例如建议可以明确支持我需要的替代方案.

X轴是一个简单的时间轴.
Y轴将有各种类别(标签左侧和右侧)
对于每个类别,我将有零到多个具有开始和结束日期的事件
我希望有一个很好的水平线代表每个类别(仅显示,没有数据)
在每一行,我想显示一个更粗的条形代表事件,从开始到结束日期.

听起来不太复杂,但我还没有在Tinterweb的任何地方看到这种图形的例子.

提前谢谢,蒙蒂

charts visualization google-visualization highcharts

Mon*_*nty

lucky-day

2
推荐指数

1
解决办法

7371
查看次数

谷歌可视化 - GeoChart - 国家色标,标签和图例

我很难让Google GeoChart像他们在文档中描述的那样工作(甚至样本)

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#Data_Format

在此页面上的示例中,地理图表显示了基于流行度使用比例的国家/地区颜色.然而,我自己的地图显示了所有具有相同深色的国家,无论人气领域的价值如何.此外,示例显示了一个图例,而我自己没有,区域样本也显示带有国家名称和值的工具提示标签,而我的仅显示数据的原始值.

我一直在倾注文件,试图弄明白这一点,我被卡住了.任何帮助赞赏.

以下是我的代码:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {'packages':['geochart']});
  google.setOnLoadCallback(drawRegionsMap);
  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Visits'],
  ['Austria','1'],
      ['Brazil','2'],
      ['Canada','40'],
      ['China','1'],
      ['Czech Republic','1'],
      ['Denmark','1'],
      ['Dominican Republic','1'],
      ['Ecuador','1'],
      ['France','1'],
      ['Netherlands','21'],
      ['United Kingdom','13'],
      ['United States','1140']
 ]);

    var options = {
        colorAxis: {colors: ['#f5f5f5','#267114']},
        legend: 'Vists'
    };

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

Run Code Online (Sandbox Code Playgroud)

google-visualization

edr*_*ney

lucky-day

2
推荐指数

1
解决办法

9071
查看次数

如何使Google图表工具提示始终保持点击状态，以单击其中的链接

我有一个带有工具提示的Google图表。工具提示文字可能包含一些链接

对于工具提示触发器，我有2个互斥的选项：“选择”或“焦点”

这是“焦点”触发器的示例：http : //jsfiddle.net/5Y2kk/2/

      function drawVisualization() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn('number', 'Voltage (V)');
       dataTable.addColumn('number', 'Current (mA.)');
       dataTable.addColumn({role:'tooltip', type:'string','p':{html:true} });
       dataTable.addRows([
         [150, 64 , "<a href='https://www.google.com/'>https://www.google.com/</a>"],
         [160, 256 , "<a href='https://www.google.com/'>https://www.google.com/</a>"]
       ]);

         // Create and draw the visualization.
         new google.visualization.BarChart(document.getElementById('visualization')).
             draw(dataTable,
                  {title:"test",
                   width:600, height:400,
                   tooltip : {isHtml:true,trigger:'focus'}
                  }
             );
      }


      google.setOnLoadCallback(drawVisualization);

Run Code Online (Sandbox Code Playgroud)

如何使两者同时工作，即：
1.将鼠标悬停在数据点上以查看值
2.单击数据点以使其停留，然后单击工具提示中的超链接

最终目的是在悬停时触发工具提示，并且仍然能够在工具提示中单击超链接之前将其消失？

javascript google-visualization

Fac*_*alm

lucky-day

2
推荐指数

1
解决办法

2220
查看次数

Google Chart:如何绘制条形图的垂直线

我正在尝试添加一条垂直线,以便在元素超出值时可以有视觉区别.

谢谢

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {
    packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["Element", "Difference", {
                role: "style"
            }],
            ["FOLDERADDUPDATE", 2.29, "#e5e6e2"],
            ["NOTEUPDATE", 3.63, "silver"],
            ["DELETENOTE", 1.12, "e5e4e7"],
            ["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"],
            ["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"],
            ["PENDINGEVENT", 0,"color:e5e4e4"]
        ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2]);

        var options = {
            title: "",
            width: 600,
            height: 300,
            bar: {
                groupWidth: "95%"
            },
            legend: {
                position: …

Run Code Online (Sandbox Code Playgroud)

javascript google-visualization

Lui*_*ito

2018 02-15

2
推荐指数

1
解决办法

3620
查看次数

格式化Google sankey图表的自定义HTML工具提示框

我在Google sankey图表中使用自定义HTML工具提示,但工具提示文本框显得非常细长,无法识别工具提示文本中的HTML标记.有谁知道如何解决这一问题？

   google.load("visualization", "1.1", {
    packages: ["sankey"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    var formatter = new google.visualization.NumberFormat({pattern:'$###.## bn'}); 
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Revenues');
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addRows([
        ['Fred', 'Ann', 107.91,],
        ['Bill', 'Ann', 47.86],
        ['Carol', 'Ann', 817.9],
        ['Jim', 'Kevin', 400],
        ['Ann', 'Kevin', 973.67],
        ['Sally', 'Kevin', 146.47],
        ['Kevin', 'EVP Sales', 1520.14]
        ].map(function(d) {
            d.push(formatter.formatValue(d[2])+ ' This is an HTML tooltip<br>It needs to be formatted nicely<br>in a rectangular box that is not <i>long and thin</i>');
            return …

Run Code Online (Sandbox Code Playgroud)

javascript css google-visualization

Rob*_*las

lucky-day

2
推荐指数

1
解决办法

930
查看次数

Google图表更改时间轴的X轴字体的颜色

我有一个谷歌图表，需要将x轴（这是时间轴）的字体颜色更改为白色，以便与我的背景形成对比：

我试过了

hAxis：{textStyle：{color：'#FFF'}

<DIV>
  <p><U><font face="verdana" size="6" color="#CCCCCC">Thursday</font></U></p>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Federation' });
    dataTable.addColumn({ type: 'string', id: 'Event' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'WWE / NXT',  'AXXESS',    new Date(0,0,0,18,0,0),  new Date(0,0,0,22,0,0)],
      [ 'WWN',  'Matt Riddles Bloodsport',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
      [ 'WrestleCon',  'Wildkat Sports', …

Run Code Online (Sandbox Code Playgroud)

charts google-visualization

Cra*_*igF

2018 09-24

2
推荐指数

1
解决办法

394
查看次数