标签: google-visualization

这就是谷歌可视化的例子.

google.load("visualization", "1", {packages:["table"], callback: drawVisualization});

要么

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

如何将参数传递给回调函数drawVisualization？

我已经生成了图表格式的谷歌电子表格.在我的水平轴报告中,我有以下值:1,2,3,4,5,10,20,30,40,50,100,200,300,400,500,600,700,800,900,1000.图表将它们解释为标签,而不是数字:

因此1到4之间的距离与20到50之间的距离相同.如何更改？(也许我必须转换输入数据 - 如何？)

这是我的电子表格,其中包含输入数据,查询和图表.

我想将其嵌入到具有此类脚本的网页中:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> 
{"dataSourceUrl":"//spreadsheets.google.com/spreadsheet/tq?key=0AtdHElsKyNw9dERVZ1lZRVNmYmRqSlVVbWszd3BVdGc&transpose=0&headers=1&range=F1%3AI21&gid=0&pub=1",
"options":{
    "reverseCategories":false,"titleX":"thousand objects","backgroundColor":"#FFFFFF","pointSize":0,
    "width":510,
    "vAxis":{"format":"#0.##########"},
    "smoothLine":true,"lineWidth":2,"logScale":false,"hasLabelsColumn":true,
    "hAxis":{"maxAlternation":1},
    "vAxes":[{"min":null,"title":"ms","max":null,"maxValue":null}],
    "title":"Performance of exposing previous value in AspectJ set-pointcut",
    "height":400,"interpolateNulls":false,"legend":"bottom","reverseAxis":false
},
"state":{},
"chartType":"LineChart",
"chartName":"Performance test"
} </script>

我试图将我的谷歌图表居中对齐,但这样做并不成功.我玩过填充物将它移动到中心,但我不想坐在那里和火虫一起玩很长时间并找出正确的位置.是否有更简单的方法,如对齐文本text-align: center.显然它不适用于谷歌图表.(我是所有这一切的新手)

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

...some code ...

    <div id='chart_div' style='width: 900px; height: 400px;'></div>             

虽然我这样做padding-left: 140px但是有更好的方法align: center

我正在尝试制作带有完整HTML的Google Charts Display自定义工具提示.

我知道如何启用工具提示并传递适当的数据 - 问题是 - 即使allowHTML启用了选项,工具提示也会呈现为纯文本,因此例如我无法在工具提示中显示图片.

这是我想要的一个小例子:

我现在拥有的:

我想要的是:

解决此问题的一种方法是禁用工具提示,捕获onmouseover事件并使用另一个库(如cluetip)在光标处显示工具提示,但我想知道是否有更简洁,本机的方式在Google Charts中启用此类功能.

另外,请查看我在谷歌图表中关于图像作为点标记的其他问题.

编辑:

与此同时,我发现了一个非常好且相当便宜(每个网站许可证60美元)的库,它涵盖了这个功能:Highcharts库

正如您在示例中所看到的,可以传递一个将格式化工具提示的函数 - 我们可以很容易地为每个数据点添加一个特殊属性,包含一个可用于动态加载工具提示内容的URL.然后可以通过向系列中的每个数据点添加额外属性来缓存工具提示.我已经用这种方式实现了它并且它完美地工作.

希望最新的编辑能帮助某人.

我有一个使用Google Charts的基本区域图表.我能够为图表上的每个点设置工具提示,但是有一种方法可以为列中的所有点提供单个工具提示.

这是所需行为的屏幕截图:

您可以看到,当光标位于图形上的某个点上时,将绘制一条垂直线,并显示一个工具提示以描述该列中的所有数据(两条线的数据).如果需要,请在此处查看实时示例.

这可以通过Google Charts实现吗？

我想简单地将标记的地点图例设置在图表的顶部.
以下是Google Chart代码,它不起作用:

var wrapper = new google.visualization.ChartWrapper({
  chartType: 'ColumnChart',
  dataTable: Dydata,
  containerId: 'visualization',
  legend: { position: 'bottom', alignment: 'start' },
  width: 520,
  height: 350
});
wrapper.draw();

我正在制作一个谷歌图表,显示和隐藏功能.手册图表将隐藏在页面加载上,当用户点击按钮图表时将显示.我的代码

<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var items = $(".label1").text();
    var data = google.visualization.arrayToDataTable([
        <%= chartItems %>
    ]);
    var options = {
        title: 'Poll Results'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>
<div id="chart_div" style="display:none; width:800px;height:500px;"></div>

我的问题是,当用户点击按钮并且图表可见时,它没有占据整个宽度和高度(800x500).它采取未知的尺寸(400x200).注意:当图表在页面加载中可见时,它可以正常工作.像这样的HTML代码是相同的变化

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

我想在Google时间线图表中设置最小和最大日期. Google时间线图表

我试过用

 hAxis: {
        viewWindow: {
          min: new Date(2014, 1, 31)
        }}

和

 hAxis: {
        viewWindow: {
          minValue: new Date(2014, 1, 31)
        }}  

两者都不起作用.如果无法设置日期范围,如何获取api本身设置的最小值和最大值？

如果有任何关于漂亮印刷JSON的人可以帮助我,我将非常感激!

我想将一个复杂的python字符串转换为JSON格式,使用下面的函数将JSON字符串移动到一个文件:

with open('data.txt', 'wt') as out:
    pprint(string, stream=out)

问题是我认为方括号的语法错误,因为这对我来说是一个新主题,我无法弄清楚如何解决这个问题.我需要的JSON格式是这样的:

  {
        cols:[{id: 'Time', "label":"Time","type": "datetime"},
              {id: 'Time', "label":"Latency","type":"number"}],
        rows:[{c: [{v: %s}, {v: %s}]},
              {c: [{v: %s}, {v: %s}]}, 
              {c: [{v: %s}, {v: %s}]},
              {c: [{v: %s}, {v: %s}]}
              ]
    }

我正在关注Google Visualization API,您可能对它很熟悉,但我需要动态图表.上面的代码是API创建图形所需的格式,因此我正在弄清楚如何将我的数据从MYSQL转换为这种格式,因此图形可以读取和显示.我想到的方法是定期更新包含所需JSON格式的文件,这就是%s存在的原因,但是MartijnPeters认为这是无效的.

有没有人知道我能做到的最简单的方法,还是你能指出任何有用的材料？谢谢!!

我正在尝试使用Google Charts创建一个黑色图表,但我似乎无法更改轴的文本颜色.我尝试了一些我在网上找到的代码,比如:

hAxis: {
  color: '#FFF'
}

但它只是不起作用.我设法改变了标题和图例颜色,但没有更改轴文本.我正在尝试将轴文本颜色设置为白色,以与背景对比:

google.load("visualization", "1", { packages: ["corechart"] });
setTimeout(function() {
  var options = {
    title: 'Test Chart',
    backgroundColor: '#000',
    legendTextStyle: { color: '#FFF' },
    titleTextStyle: { color: '#FFF' },
    hAxis: {
      color: '#FFF',
    }
  };
  var chart = new google.visualization.LineChart(document.querySelector(".chart"));
  chart.draw(google.visualization.arrayToDataTable(
    
    [
      ["Year", "T1", "T2", "T3"],
      [0, 10, 20, 30],
      [1, 10, 20, 30],
      [2, 10, 20, 30],
      [3, 10, 20, 30],
      [4, 10, 20, 30]
    ]
  
  ), options);
  
}, 100);

.chart {
  width: …