标签: google-visualization

我想知道为什么谷歌图表在没有指定顶部/右/左轴时添加空白填充.

选择图像,你会发现一个巨大的填充,除了已经填充的底部,这就是为什么,如何删除它？

具体来说,谈论左右填充.

谢谢.

我正在寻找一种使用Google Charts显示跨时间排名的方法.

(这是与此处相同的问题,但这次使用Google Charts而不是Highcharts)

有没有办法以"用户友好的方式"显示排名,我的意思是:#1排名位于图表顶部,最后排名位于底部.

我想使用折线图.

我想从页面中获取Google Chart数据,将其转换为CSV,然后将其移交给下载程序.

在chartpage.js中

function downloadCSV(args) {
  var csvData, filename, link;
  var action = args.action_name;
  var csv = convertArrayOfObjectsToCSV({
    action_name: action
  });
  filename = args.filename || 'export.csv';

  csvData = encodeURI(csv);

  link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv;charset=utf-8,' + csvData);
  link.setAttribute('type', 'data:text/csv;charset=utf-8');
  link.setAttribute('download', filename);
  link.click();
 }

然后在chart.coffee中:

 init_chart = ->
   chart = new google.visualization.BarChart(document.getElementById('chart_div'));  //#chart_div in chart.html.haml

render_chart = (items, year)->
  @data = new google.visualization.DataTable()
  data.addColumn 'string', I18n.t('charts.name')

  // Other logic for building chart from Rails DB Data

  for key_item in items
  label = …

我需要在我正在显示的每个工具提示上添加另一行文本(在面积图上).我已经包含了一个截图来说明我希望做的事情.

我目前的图表: 添加了附加文本的图表.(这就是我想要做的):

我希望这样做而不必使用第三方JS进行自定义工具提示.有没有办法只添加另一行基于文本的内容以显示在默认工具提示中？

任何帮助是极大的赞赏.

X轴上有(太多)标签,它们显示为'8/...'.它们应该是日期(2011年8月22日),但由于太多,它们被省略号取代.

如何减少标签数量以使日期正确显示？

新的Google Chart API会将图表创建为SVG(而不是以前的PNG).我希望能够保存生成的SVG.我怎样才能做到这一点？

如果我使用Chrome检查页面上的元素,我可以找到包含SVG的svg标记.我希望能够使用JavaScript获取生成的SVG.我不想在JavaScript中搜索HTML源代码中的svg标记,如果有办法直接从图表对象(可能是ChartWrapper类？)获取SVG字符串,那将是更好的选择.

我正在使用Google Apps脚本和EmbeddedChartBuilder在我的Google电子表格中嵌入折线图.手动创建这些图表时,您可以使用(非默认)选项"将列A用作标签"(其中"A"是数据范围中的第一列).我找不到从脚本中做同样的方法.从Google Visualization折线图文档中可以看出,默认情况下将第一列视为具有"域"角色; 但是EmbeddedChartBuilder似乎会覆盖它并为所有列提供"数据"角色.由于我没有明确的DataTable,我无法自己设置列角色.

我错过了这样做的方法吗？或者我是否必须将方法从EmbeddedChartBuilder切换为使用电子表格作为数据源？

我正在尝试使用Google Visualization API创建折线图.我想启用缩放.文件说'探险家'选项很有用.但是当我尝试使用"资源管理器"选项时,会显示图表,但缩放不起作用.

这是我的代码:

function drawVisualization(dataValues) {
var data = new window.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Count');

for (var i = 0; i < dataValues.length; i++) {
    data.addRow([new Date(dataValues[i].Year, dataValues[i].Month-1, dataValues[i].Day), dataValues[i].Count]);
}

var formatter_short = new google.visualization.DateFormat({ formatType: 'short' });
formatter_short.format(data, 0);
var options = {
    title: "Time statistics",
    explorer: { maxZoomOut: 8 }
};
var chart = new google.visualization.LineChart(document.getElementById('date'));
chart.draw(data, options);
}

如何解决此问题并使折线图可缩放？

我有一个页面可以动态地将谷歌时间线图表加载到div上.在您添加项目时,时间轴的高度会增加.如果图表小于div,则底部的空白区域将显示该图表.如果图表较大,则会在侧面显示滚动条.

我想要的是容器div总是显示完整的图表,或者另一种方式,我希望容器div高度动态匹配图表的高度.

我试图近似每个图表行的平均大小,然后在我加载图表时调整div高度:

$("#gantt_chart").height(data['num_contents']*46);

但是,虽然它以某种方式起作用,但它远非完美,因为高度的近似开始随着每个附加线积累而且div底部的空白空间增加,这根本不是一个优雅的解决方案.

我如何确保容器div始终显示完整的图表？

我希望这很清楚.

非常感谢.

我正在使用Google可视化材料图表...

https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Material

....在我的例子中......

http://jsfiddle.net/ETFairfax/78595a3h/

...工具提示将条形值四舍五入,而不是仅显示值.

我已尝试自定义工具提示,如下所示:https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content但仍然没有乐趣.

文档确实说......

"材料图表处于测试阶段."

所以也许我正在为失败的事业而战.

我的问题:

有谁知道如何阻止工具提示四舍五入？

任何帮助赞赏.

HTML

<div id="chart_div" style="width: 900px; height: 500px;"></div>

JS代码:

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 8.5], // Tooltip says 8.5. CORRECT
        ['Eat', 11.5], // Tooltip says 12 - INCORRECT
        ['Commute', 2],// Tooltip says 2 - CORRECT
        ['Watch TV', 0.28],// Tooltip says 0.28 - CORRECT
        ['Sleep', 7.28] // Tooltip says 7.3 - INCORRECT …