小编Whi*_*Hat的帖子
Google Chart 未占用 100% 的空间
首先，对这个例子大喊大叫：https : //www.c-sharpcorner.com/UploadFile/ca9151/google-charts-api-using-database-in-Asp-Net/ 如果你想要一个简单的演练构建谷歌图表，那就完美了。
在说......在那个例子中，在我的项目中......我无法让图表从指定部分的左侧开始。它不断缩进。当我隐藏轴标签时，情况会更糟，因为由于缺少单词，空间会变得更大。
有谁知道如何让它们占据 100% 的宽度？（在图像中，我希望图表从红线开始，一直到 div 的另一侧）
提前致谢。
推荐指数
解决办法
查看次数
如何将日期和值与 Google 图表中的网格线对齐？
我在我的应用程序中使用 Google Chart 和以下代码（JSFiddle）：
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'date');
data.addColumn('number', 'view');
data.addRows([
[new Date('2015-08-01'), 5],
[new Date('2015-08-02'), 7],
[new Date('2015-08-03'), 2],
[new Date('2015-08-04'), 16],
[new Date('2015-08-05'), 3],
[new Date('2015-08-06'), 6],
[new Date('2015-08-07'), 1]
]);
var options = {
title: 'view count',
width: 900,
height: 500,
hAxis: {
format: 'MM-dd',
gridlines: {count: 90}
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 6
}
}
};
var chart …推荐指数
解决办法
查看次数
如何为谷歌图表的x轴赋予样式？
我正在实现 google 图表，我想为 x 轴数据提供样式。我发现下面的代码可以做到这一点。
hAxis:{
title: 'Month',
textStyle :{
fontSize : 10
}
}
我想在文本数据下划线并将光标样式更改为指针。我在谷歌图表网站上搜索但没有找到。
推荐指数
解决办法
查看次数
getImageURI() 在 google 的 orgchart 中不起作用
我创建了这个小提琴，但是当尝试getImageURI()从图表（orgchart 谷歌图表）尝试时，会生成一个错误。
错误：“未捕获类型错误：chart.getImageURI 不是函数”
我需要从创建的组织结构图生成图像或 PDF。是否可以？
google.charts.load('current', {packages:["corechart","orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
$( …推荐指数
解决办法
查看次数
Google Charts - Gauge Graph动画无效
我正在尝试使用Google Graphs创建一些GAUGE图表.我的目标是从php页面加载数据并进行自动刷新.我能够做到这一点,但是当刷新数据时,Gauge线不是动画的,而是从new重绘它们.我希望看到像这样的酷动画:https://jsfiddle.net/api/post/library/pure/.实际上我是从静态文件加载数据,然后我将从MySQL数据库创建数据(测试和工作).这是我的代码:
temperature.php
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://URL/fetch_data3.php?type=gauge",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 600, height: 300,
redFrom: 35, redTo: 50,
yellowFrom: 24, yellowTo: 35,
greenFrom: 18, greenTo: 24,
majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10,
animation:{
duration: 1000,
easing: 'inAndOut',
},
max: 50, min: -10
};
var chart = …推荐指数
解决办法
查看次数
Google Charts interpolateNulls 不起作用
我无法使用 interpolateNull 选项创建图形。应该是正确的，但不能在缺失点之间画线。数据是从 php-json 收集的。这里是示例和 json 提供的数据。html-javascript 页面：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: 'http://192.168.1.50/fetch_data.php?type=line2',
dataType: 'json',
success: function (jsonData) {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable(jsonData);
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.00'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
vAxis: …推荐指数
解决办法
查看次数
在堆积条形图 Google 图表中显示百分比
// Display google stacked bar chart
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
下面是我的堆积条形图的图片。
我无法在绿色条上显示百分比，但无法在红色条上显示百分比。绿条中的当前值不是百分比值。
推荐指数
解决办法
查看次数
Google 可视化折线图 - 多条线
我有一个折线图，h 轴是日期，v 轴是双精度。我需要显示两行：
lineA: [
[2016-1-1 00:00, 1.1]
[2016-2-1 00:00, 1.1]
[2016-3-1 00:00, 1.1]
]
lineB: [
[2016-1-1 00:00, 2.1]
[2016-2-1 08:00, 2.1]
[2016-3-1 00:00, 2.1]
]
为了在图表上显示数据，我需要组合这两行并将结果传递给 arrayToDataTable。
combine: [
[2016-1-1 00:00, 1.1, 2.1],
[2016-2-1 00:00, 1.1, null],
[2016-2-1 08:00, null, 2.1],
[2016-3-1 00:00, 1.1, 2.1],
]
由于上述原因，我的线条出现了间隙。我该如何解决这个问题？是否可以通过两组单独的组，每行一组？我找到的所有示例都需要将它们合并为表格combine。
作为 line1 和 line2 表的一部分提供时，我需要保留空值
推荐指数
解决办法
查看次数
谷歌图表中悬停时的垂直线
我正在我的项目中使用谷歌折线图和 angularjs 指令，我正在搜索如何在悬停时获得垂直线，例如谷歌趋势而不是放置固定线，但我找不到如何做到这一点。
这就是我想要尝试做的：
我只是隐藏垂直线，但在鼠标悬停时不显示，这是我对 angular-google-chart 指令的选项
options: {
vAxis: {
title: 'My title',
gridlines: {
count: 10
}
},
hAxis: {
title: 'title hAxis',
gridlines: {
color: 'transparent'
}
}
}
javascript charts google-visualization angularjs angular-chart
推荐指数
解决办法
查看次数
移动Google Chart列注释位置
我使用下面的代码生成一个柱形图,列中有数字,但我真的希望它们位于条形图的底部,而不是顶部.
这是我的图表的视觉效果:
var data = google.visualization.arrayToDataTable([
['Type', 'Completed', 'Outstanding'],
['Item 1', 75, 25],
['Item 2', 50, 40],
['Item 3', 80, 15]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}]);
var options = {
legend: 'none',
height: 270,
chartArea: { 'width': '80%', 'height': '80%' },
bar: { groupWidth: '80%' },
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
}, …推荐指数
解决办法
查看次数