我有一个类似于下面使用Google Visualization API的图表.我的问题是,在该图表的键的右侧(低,中,高),有太多的空白区域.我怎样才能摆脱这个空白区？
alt text http://blog.securitymonks.com/wp-content/uploads/2010/04/googlecolumn.png
在下一页中,它说明了如何使用googlecharts gem
http://googlecharts.rubyforge.org/
它有一条线说
require 'gchart'
我把它放在哪里？在gemfile或控制器中？
编辑:在我的视图文件中,我有:
<%
require 'gchart'
Gchart.line(:size => '200x300',
:title => "example title",
:bg => 'efefef',
:legend => ['first data set label', 'second data set label'],
:data => [10, 30, 120, 45, 72])
%>
但上面没有显示图像
编辑2:图表现在正在运行,这是我使用的代码
<% require 'gchart' %>
<img src="<%=Gchart.line(:data => [0, 40, 10, 70, 20])%>"/>
以下是Google Charts API的表格.我正在尝试将"数字"列降序排序.有人知道怎么做吗？
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Names');
data.addColumn('number', 'Numbers');
data.addRows(3);
data.setCell(0, 0, 'Name 1');
data.setCell(1, 0, 'Name 2');
data.setCell(2, 0, 'Name 3');
data.setCell(0, 1, 1);
data.setCell(1, 1, 2);
data.setCell(2, 1, 3);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="table"></div>
正在试用Google Chart功能代码.我目前正在尝试使用类别过滤器创建折线图.这是我的代码:
function drawVisualization() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Define a category …我使用示例页面中的代码创建水平条形图:
选项backgroundColor适用于其他图表类型,例如this和that.
有没有办法改变Bars图表的背景颜色？
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening …我试图将 饼图保存为pdf文件,如http://keepcoding.ehsanabbasi.com/php/convert-google-chart-to-png-and-pdf/在php.chartsrc中使用javascript显示以下值而不是png图像源
" function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)} failed (filesystem path '/var/www/html/function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)}')"
$script ="
google.setOnLoadCallback(drawChart);
function drawChart() { //code for drawing chart}
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartsrc = chart.getImageURI();
});
$doc->addScriptDeclaration($script);
echo "<div id='piechart'></div>";
我们希望在我们的网站上嵌入一个非常基本的交互式地图,点击一个区域将带您到我们网站上的特定页面.我们想在谷歌geochart中使用这些地区
这是我们正在使用的地图 https://jsfiddle.net/tyvnfxf4/
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['England', 400],
['Wales', 300],
['Scotland', 400],
['Ireland', 600],
]);
var options = {
region: 'GB',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
我们希望:威尔士可以链接到www.example.com/wales Ireland以链接到www.example.com/ireland等
有什么帮助吗？
非常感谢
我是Javascript的新手,但我的客户希望有不同的工具提示背景,边框和文字颜色.由于我是新手,我不知道应该更改或放入代码.先感谢您!(样式用于悬停时生成的工具提示,而不是添加额外的工具提示)
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: …我正在尝试使用Google图表API,但是我收到一个我无法理解的错误:
TypeError:google.charts.Bar不是构造函数
这是我的代码:
<div class="row">
<div class="col-md-12" style="padding-left:3px; padding-right:3px">
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'val1', 'val2' , 'val3', 'val4'],
[ '09', 12, 5, 9, 2],
[ '10', 32, 19, 16, 9],
[ '11', 2, 7, 5, 12],
[ '12', 23, 11, 9, 18],
[ '13', 5, 7, 4, 12],
[ '14', 21, 16, 12, 43],
[ '15', 2, 1, 2, 3],
[ '16', 9, …我有一个应用程序,有许多包装响应站点(一堆div从API预定义),每个都填充了谷歌图表.问题是,当页面首次加载时,图表将呈现为当前大小,并且当窗口调整大小时,只有包装器发生更改,而不是图表本身.
如何在不使用Jquery的情况下制作类似https://codepen.io/flopreynat/pen/BfLkA的内容 ,是否需要在Angular的特定生命周期中设置(例如onChange？)或仅仅是一个函数？我正在使用一个只检索数据的库,所以我没有这样的函数:
$(window).resize(function(){
drawChart1();
drawChart2();
});