标签: google-visualization
中心对齐 Google 仪表图
我正在努力让谷歌仪表图居中对齐。
我想要一行带有居中仪表字符的行和一行带有居中折线图的行。
我尝试了各种选项并使用“display: inline-block”但不起作用。带有折线图的行的行为符合预期。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge', 'corechart']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
drawChart();
drawGauges();
}
function drawGauges() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var w = $( window ).width();
var x = Math.floor(w * 0.3);
console.log("width: " + w + ", x = " + x);
var h = $( window ).height();
var y = Math.floor(h * …推荐指数
解决办法
查看次数
如何通过 Google Chart API 使用 csv 文件？
我有一个 csv 文件：
\n\n站点,Janvier,F\xc3\xa9vrier,火星,艾薇儿,麦,Juin,Juillet,Ao\xc3\xbbt,9 月,10 月,11 月,D\xc3\xa9cembre\nCITROEN VILLEFRANCHE CARROSSERIE,0,0,14,0, 18,21,0,0,0,0,0,0\n雪铁龙自由城 ,240,237,230,264,219,285,219,130,4,0,0,0\n日产自由城 ,174,202,215,181,196,244,203,107,10,1,0,0
\n\n我想在柱形图中查看其数据。
\n\n但我不知道如何使用 API 读取 csv 的数据。\n以下是使用 API 的柱形图示例：
\n\ngoogle.charts.load("current", {packages:[\'corechart\']});\ngoogle.charts.setOnLoadCallback(drawChart);\nfunction drawChart() {\n var data = google.visualization.arrayToDataTable([\n ["Element", "Density", { role: "style" } ],\n ["Copper", 8.94, "#b87333"],\n ["Silver", 10.49, "silver"],\n ["Gold", 19.30, "gold"],\n ["Platinum", 21.45, "color: #e5e4e2"]\n ]);\n\n var view = new google.visualization.DataView(data);\n view.setColumns([0, 1,\n { calc: "stringify",\n sourceColumn: 1,\n type: "string",\n role: "annotation" },\n 2]);\n\n var options = {\n title: "Density of Precious Metals, …推荐指数
解决办法
查看次数
Google Charts：如何增加工具提示的宽度
我正在使用 Google Charts 柱形图。
如果您观察到服务器计算时间值已中断到下一行，则在此处。根据要求，它应该在同一行。请帮助我可能的解决方案
推荐指数
解决办法
查看次数
Google 图表值从 Bootstrap 模式中的饼图移出
我正在使用 Google 图表来可视化我的数据，并且使用 3d 饼图在引导模式中显示数据，但该值超出了我在 google 上搜索的饼图，但注意到了这个问题
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="chart" id="chart_div"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
我的 jsfiddle :- https://jsfiddle.net/L0pt229a/
javascript jquery charts google-visualization twitter-bootstrap
推荐指数
解决办法
查看次数
通过单击图例打开和关闭一系列谷歌图表
我有一个包含 6 个系列的面积图。我希望用户能够单击图例来切换系列的可见性。
我找到了这个示例并尝试将其包含在下面的代码中，但没有任何反应。在添加此代码之前，如果我单击图例中的其中一个系列，该系列会变得更厚，然后再次单击它，它将恢复正常，相信这是一些默认行为。然而，一旦系列变得更厚，包含此代码我就无法执行任何操作，即缩放或单击图表来获取点的值。
不确定我错过了什么？
更新
我也尝试过关注这篇文章，但结果相同。
最新更新
我已将代码更改为以下内容。
我现在收到的错误如下......
未捕获错误：列索引 8 无效。应该是 [0-7] 范围内的整数。在 gvjs_en (jsapi_compiled_default_module.js:75) 在 gvjs_P.gvjs_.uc (jsapi_compiled_default_module.js:92) 在 gvjs_P.gvjs_.Za (jsapi_compiled_default_module.js:91) 在 Data.displayed.reduce (jScore.js:220) 在数组.reduce () 在 vparse (jScore.js:214) 在 showHideSeries (jScore.js:202) 在 gvjs_Zn。(jsapi_compiled_default_module.js:179) 在 gvjs__n (jsapi_compiled_default_module.js:129) 在 gvjs_Zn.gvjs_.dispatchEvent (jsapi_compiled_default_module.js:127)
我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="scripts/jScore.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>
</head>
<body>
<div id="chartScore" style="height:1000px"></div>
</body>
</html>
我的JS文件
var …推荐指数
解决办法
查看次数
Angular Google Charts：如何为柱形图中的列设置不同的颜色
我通过 npm 使用 Angular 9 + Google Charts：npm install angular-google-charts
我想为柱形图中的所有列设置不同的颜色，但它为所有列设置第一种颜色。
有人遇到过这样的问题或者有任何解决方案来为谷歌柱形图中的列设置不同的颜色吗？
HTML：
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columns]="columnNames"
[options]="options"
[width]="width"
[height]="height">
</google-chart>
打字稿：
export class ColumnChartComponent[![enter image description here][1]][1] {
title = 'Population (in millions)';
type = 'ColumnChart';
data = [
["2012", 900],
["2013", 1000],
["2014", 1170],
["2015", 1250],
["2016", 1530]
];
columnNames = ['Year', 'Asia'];
// chart options in which I am setting colors
options = {
colors: ['#5cb85c', '#f0ad4e', '#d9534f', '#5bc0de', '#f6c7b6'],
};
width = 550;
height …推荐指数
解决办法
查看次数
格式化谷歌图表区域日期(如2012年3月,2013年10月等)
我想将Google Chart Area日期显示为2012年3月,2013年10月等.格式中不应有任何日期数字.我只能找到3种格式
格式
var formatter_long = new google.visualization.DateFormat({formatType:'long'});
var formatter_medium = new google.visualization.DateFormat({formatType:'medium'});
var formatter_short = new google.visualization.DateFormat({formatType:'short'});
导致
2008年2月28日(长)
2008年2月28日(中)
2/28/08(简称)
如果我可以从结果中删除日期数字,那么长期和中期工作对我来说.有没有机会以某种方式做到这一点？
推荐指数
解决办法
查看次数
在谷歌图表上悬停时更改光标样式
我有一个谷歌图表,点击时会将您带到另一个页面.我想在图表上方悬停时更改光标样式以指示其可点击.我正在听这个onmouseover事件,我在处理程序中有这个代码
$('#div_id path').css("cursor", "pointer")
我可以看到应用于路径元素的样式.但光标不会改变.如何在谷歌图表上悬停时更改光标样式？
推荐指数
解决办法
查看次数
未捕获的TypeError:对象[object global]没有方法
var resultItemView = Marionette.CompositeView.extend({
render : function(){
google.load("visualization", "1", {packages:["table"], callback: function() {
var self = this;
this._drawVisualization(self);
}});
},
_drawVisualization : function(self){
var data = new google.visualization.DataTable();
//Here i'm creating data table ...
var chart = new google.visualization.LineChart(self.$el.find("#graphDiv"));
chart.draw(data, null, null);
},
return resultItemView;
});
在渲染功能正在加载谷歌可视化,并在回调函数中调用drawVisualization.此外,我将"this"对象作为参数传递给此函数.为此,我使用了匿名函数.在drawVisualization函数中,self等于这个"this"对象.但我得到这个错误:"未捕获TypeError:对象[对象全局]没有方法'_drawVisualization'".我究竟做错了什么？我怎么能纠正它？感谢帮助.
推荐指数
解决办法
查看次数
带有prototype.js的Google Charts
我正在尝试在我的网站上使用谷歌geochart.但问题是当绘制geochart时,我收到错误:"对象#没有方法'每个'"
这里是我正在尝试的代码:
<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', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('chart_1'));
chart.draw(data, options);
};
</script>
<div id="chart_1">Chart should be here</div>
当我从页面中删除prototype.js时,一切正常,但我必须离开它.有什么建议如何解决这个冲突？
推荐指数
解决办法
查看次数
标签 统计
charts ×5
javascript ×4
css ×2
html ×2
jquery ×2
angular ×1
callback ×1
csv ×1
date-format ×1
flexbox ×1
gauge ×1
google-api ×1
linechart ×1
mousehover ×1
prototypejs ×1
self ×1
this ×1