标签: google-visualization
Zend框架与谷歌图表
我正在寻找一些很好的工具来生成图表,我认为这Google Charts将是最好的.但是,如果有一些准备使用库连接我想知道Google Charts用Zend Framework.
你有没有使用它们？
推荐指数
解决办法
查看次数
是否可以使用json数据绘制图表？
是否有任何好的文章让我开始使用Google Visualization API,我将在我的应用程序中使用JSON数据绘制图表.任何建议.
编辑: 我正在通过这个问题迭代json对象绘制柱形图？.这正是我想要做的？有什么好的前任？
推荐指数
解决办法
查看次数
Google GeoChart不支持州级别的displayMode到地区
我正在构建一个简单的应用程序,它将根据州名来标记印度的州.
所以,我开始尝试以下示例.
如果我设置了它,displayMode : 'markers'但是根据他们的文档,状态可以显示为区域.
但是,它不起作用.难道我做错了什么？
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State'],
['West Bengal'],
]);
var options = {
region: 'IN',
displayMode: 'regions',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
推荐指数
解决办法
查看次数
Google Charts Vertical Axis上的重复数字
当其中一个轴变得奇怪并开始重复数字(即:1,1,2,2而不是1,2,3,4)时,我正在使用谷歌可视化的错误修复为组合(列/线)图表.请看下面的图片
以下是图表选项设置:
// Instantiate and draw our chart, passing in some options.
var frequency_by_day_options = {
vAxes: [
{format:'#,###', title:"Call Volume"},
{format: '#%', title:'Missed Call Rate',
viewWindow:{
max:1,
}}
],
legend: {position: 'none'},
chartArea: { height:'60%', width:'60%'},
width: 800,
height: 350,
backgroundColor: 'transparent',
bar: { groupWidth: '90%'},
isStacked: true,
seriesType: 'bars',
series: {0: {type:'bar', targetAxisIndex:0}, 1: {type:'line', targetAxisIndex:1},},
colors: ['blue', 'green'],
animation:{
duration: 1000,
easing: 'out',},
};
我不知道这里发生了什么.即使我注释掉所有vAxis选项,我仍然会观察到这种行为.关于我做错什么的任何想法？这让我疯了:)
推荐指数
解决办法
查看次数
在谷歌图表图表中设置浮点数
我想将值为137.55的值分配给谷歌图表中的"数字"类型列,然后绘制它.无论何时我分配浮点数,它都会抛出此异常:
Uncaught Error: Type mismatch. Value 32.03 does not match type number in column index 1
我的代码是这样的:
var data = new google.visualization.DataTable();
data.addColumn('number','Loop');
data.addColumn('number','ReqSec');
var myTicks = new Array();
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2
});
for (var i=0;i<arr.length;i++){
myVal = $.trim(arr[i][10]);
myVal = parseFloat(Math.round(myVal * 100) / 100).toFixed(2);
data.addRow([parseInt(i), myVal]);
myTicks[i] = i;
}
formatter.format(data, 1);
// Create and draw the visualization.
new google.visualization.AreaChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 700, height: 400,
vAxis: {title: 'Throughput'},
hAxis: {title: 'Loop', ticks: …推荐指数
解决办法
查看次数
饼图中带小值的Google可视化问题
显然,谷歌可视化饼图不喜欢非常小的值.我已经创建了一个JSfiddle来演示这个问题:http://jsfiddle.net/technotarek/YRKHd/
当你加载小提琴时,你会看到饼图有四个类别,就像在第6-13行中检查JS一样.现在,尝试将JS的第13行中的第三个值从5更改为1,然后运行小提琴.您将看到它将饼图上的标签更改为"其他"的新标签.任何人都可以找到解决方法吗？(这在我的情况下尤其成问题,因为我们在某些情况下使用标签'other'来表示数据中完全不同的组.)
为了满足SO验证器,这里是来自小提琴的我的JS代码:
function drawChart(){var data = new google.visualization.DataTable(); data.addColumn('string','Race'); data.addColumn('number','Percent'); data.addRows(4); data.setValue(0,0,'Black,non-Hispanic'); data.setValue(0,1,1370); data.setValue(1,0,'西班牙裔'); data.setValue(1,140); data.setValue(2,0,'怀特,非西班牙裔'); data.setValue(2,1,537); data.setValue(3,0,'抑制类别'); data.setValue(3,1,5);
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, {
width: 650,
height: 500,
fontSize: 11,
chartArea:{
top:20,
left:100
},
colors:
[
'8d2300','FE9929','D95F0E','000000', ]
});
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
推荐指数
解决办法
查看次数
谷歌(图表)可视化:在图例中显示价值
我在页面中添加了Google Visualization饼图.这一切都很好用,我没有遇到使用预定义选项自定义它的问题.但是,没有选项可以显示图例中的值而不是百分比,只能在切片本身或悬停工具提示中显示.
我想显示图例中的值和切片中的百分比(后者我可以通过选项完成).
对于奖励点...我可以在值的末尾追加"MW",即输出145WM而不是145.
我当前的图表代码:http://pastebin.com/4JJdpxKx
我确信它很明显,但数据是动态引入的.
推荐指数
解决办法
查看次数
如何在Google时间轴图表中将背景设置为透明？
我正在尝试将Google时间线图表的背景设置为透明。时间线图
尝试使用
backgroundColor: 'none'
backgroundColor: 'transparent'
似乎没有任何工作。
我也尝试使用
alternatingRowStyle: false
删除行中的交替颜色。它也不起作用。还有其他想法吗？
推荐指数
解决办法
查看次数
Laravel - 将字段从数组传递到JSON
嗨我有一个对象数组,我想通过laravel传递给json,我在数组中有两个值,我希望json通过它是browsername和usagepercentage.
这可以有很多结果,所以首先我计算字段,然后迭代这些,如下:
$index = $this->client->fetchPages($id);
$browsergraphs=array();
// loop through repeated block by UID
$count = 0 + ($index->fields->{"browserstats"});
for ($x = 0; $x < $count; $x++) {
$browsergraphs[$x] = [
'browsername' => $index->fields->{"browsername-repeated-block-".$x},
'usagepercentage' => $index->fields->{"usagepercentage-repeated-block-".$x},
];
}
值得一提的是,我正在使用自定义API进行调用 $this->client->fetchPages($id);
现在,如果我 dd($browsergraphs);
我的输出是:
array(5) { [0]=> array(2) { ["browsername"]=> string(2) "IE" ["usagepercentage"]=> string(4) "76.2" } [1]=> array(2) { ["browsername"]=> string(7) "Mozilla" ["usagepercentage"]=> string(4) "16.5" } [2]=> array(2) { ["browsername"]=> string(8) "Netscape" ["usagepercentage"]=> string(3) "1.7" } [3]=> array(2) { ["browsername"]=> string(5) …推荐指数
解决办法
查看次数
在引导标签中显示Google图表时出现问题
我在Boostrap标签中显示Google图表时遇到问题。我有两个标签，每个标签中都有一个Google图表。在第一个图表中，图表可以正确显示，但是在第二个图表中，图表很小并且可以压缩。我不明白为什么。
这是我的代码：
<div class="tab-pane active" id="player">
<h3>Players' resources</h3>
<div id="totalPlayerChart" style="height: 500px;"></div>
</div>
<div class="tab-pane" id="producer">
<h3>Producers' resources</h3>
<div id="totalProducerChart" style="height: 500px;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawTotalPlayerChart);
google.charts.setOnLoadCallback(drawTotalProducerChart);
function drawTotalPlayerChart() {
[...]
var chart = new google.visualization.LineChart(document.getElementById('totalPlayerChart'));
chart.draw(data, options);
}
function drawTotalProducerChart() {
[...]
var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));
chart.draw(data, options);
}
</script>
推荐指数
解决办法
查看次数
标签 统计
charts ×4
javascript ×4
json ×2
arrays ×1
css ×1
geolocation ×1
google-api ×1
graph ×1
laravel ×1