标签: google-visualization
带有多个颜色区域的Google Chart Gauge
我正在使用Google Charts API创建计量表.这是一个非常简单有效的API,可以即时创建图表.
这是该图表的文档
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
现在,我需要自定义一个小图,这个图表添加的不仅仅是一个绿色区域.例如,我需要一个绿色区域,从0到10,一个从20到30,另一个从40到50,但似乎不可能.
以下是传递给draw()方法以设置绿色区域的选项
var options = {
greenFrom: 0, greenTo: 10
};
我试图传递一个数组作为一个选项,但它显然不起作用.这是我试过的.
var options = {
greenFrom: [0, 20, 40], greenTo: [10, 30, 50]
};
有人有同样的问题吗？
任何帮助都是适用的.
谢谢
2
推荐指数
推荐指数
1
解决办法
解决办法
7101
查看次数
查看次数
Google Chart API:更改悬停图例上的颜色
所以我有一个ColumnChart,其中一个内置功能是你可以将鼠标悬停在图表图例中的一个项目(所谓的类别)上,并在图表中的相应列周围找到一些高亮边框.
现在我的图表中有很多列和类别,很难看到突出显示的系列/类别,因为默认行为只是在列周围显示1px灰色边框.我的列只有几个像素的宽度,我仍然需要区分10个不同的类别(=颜色).因此,选择非常浅的颜色(边框很容易被发现)是不可取的.我发现无法改变:
- 高光边框的样式(主要是颜色)或
- 在图例中选择各自类别时的列颜色(填充颜色).
是否有一些属性可以传递给draw()我的图表调用以更改突出显示？我是否必须手动覆盖某些事件/方法？
非常感谢帮助!
2
推荐指数
推荐指数
1
解决办法
解决办法
3940
查看次数
查看次数
通过鼠标悬停在谷歌图表中更新
我正在使用Google图表以交互方式绘制一些数据.
我想绘制两个图表.第一张图表绘制了f(x)与x的关系曲线.第二个图表绘制g(x,y)与y(对于固定值x).在第一个图表的鼠标悬停时,x值将用于重绘g(x,y)与y.
例如,在第一个图表上的鼠标悬停x = 1时,第二个图表将刷新,绘制g(1,y)对y.
我能够实现这一目标的唯一方法是在javascript中手动绑定mouseover事件,并触发第二个图表的完全重绘(通过删除其数据并使用moused over x值复制数据).但是,有一种内置机制可以使用控件中的值重绘图表(例如滑块,此处为示例).
有没有人知道是否有办法绑定两个图表,以便鼠标悬停事件可用于重绘一个图表与新参数？
2
推荐指数
推荐指数
1
解决办法
解决办法
3803
查看次数
查看次数
Google图表会调用onmouseover事件
我整天都在研究这个问题而没有成功.我有一个显示一些数据的谷歌图表,工作正常.
我一直在研究一些更详细的图表,包括大约十几个图表图例项目.我想在图表下面显示我的图例,所以我将它的位置设置为底部.
但是图表产生的"丑陋"分页对我的经理并不是很有吸引力.
所以我隐藏了它并重新渲染了图形下方的图例项目而没有与一些自定义javascripting分页(实际上我从这里看到了代码http://jsfiddle.net/asgallant/6Y8jF/2/)
var legend = document.getElementById('legend');
var lis = [];
var total = 0;
for (var i = 0; i < data.length; i++) {
var legendValue = data[i];
if(legendValue.indexOf("PROVIDER") == -1){
// create the legend entry
lis[i] = document.createElement('li');
lis[i].id = 'legend_' + legendValue;
lis[i].className = 'legendary';
lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>';
// append to the legend list
legend.appendChild(lis[i]);
}
}
所以几乎与实际的图形图例具有相同的功能,但有一件事缺失了.当原始谷歌图表图例悬停时,图表上的项目将突出显示,如下例所示:
http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper
如果您将鼠标悬停在德国或美国,则会选择或突出显示图表上的条形图.
如何从列表项中触发相同的行为？
我试过了 :
function …2
推荐指数
推荐指数
1
解决办法
解决办法
5746
查看次数
查看次数
带有事件监听器的多个图表 - 如何查找哪个图表触发了监听器？附上测试用例和屏幕截图
我有一个JavaScript问题 - 即使涉及谷歌图表.
我准备了一个简单的测试用例,您可以立即在浏览器中尝试.
我无法准备一个JSFiddle,它由于某种原因没有运行我的代码.
我的问题是:我的网页上有多个图表,每个图表都注册了一个"选择"事件监听器.在监听器内部,我(非常自然地)需要看到,哪个图表完全被点击(选中).
我下面的有问题的代码总是在网页上打印最后一个图表的标题.
您可以在下面的屏幕截图中看到它:我点击GSM_1800_EDGE_EMAC_HP_H图表,但警报显示它是GSM_1800_EDGE_EMAC_HP_M:
我尝试了不同的方法(闭包？),但为了简洁起见,没有在这里列出它们.
这是我的代码,请var data = ...在开头忽略大量的任务,其余的代码非常简单:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"GSM_1800_EDGE_EMAC_HP_L":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.673198},{"v":1.703763},{"v":1.816869},{"v":1.850355},{"v":1.888287},{"v":2.072179},{"v":2.208197},{"v":2.040064},{"v":1.785052},{"v":1.862001},{"v":2.018309},{"v":1.713204},{"v":1.891804},{"v":2.215505},{"v":1.852155},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.52737},{"v":-54.60983},{"v":-52.95285},{"v":-57.21094},{"v":-55.08899},{"v":-52.80658},{"v":-54.45917},{"v":-54.47009},{"v":-55.10355},{"v":-53.616},{"v":-52.98431},{"v":-54.99429},{"v":-52.11819},{"v":-54.55518},{"v":-56.68314},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":21.76066},{"v":47.62163},{"v":21.30866},{"v":42.55275},{"v":26.76497},{"v":34.12614},{"v":18.49979},{"v":29.44469},{"v":22.63238},{"v":34.02929},{"v":38.48473},{"v":28.63755},{"v":27.99183},{"v":14.27035},{"v":11.30005},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.05695},{"v":26.26254},{"v":26.23032},{"v":26.21082},{"v":26.21725},{"v":26.19885},{"v":26.21213},{"v":26.19904},{"v":26.19995},{"v":26.20013},{"v":26.21317},{"v":26.20001},{"v":26.21893},{"v":26.18625},{"v":26.19437},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_H":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.793361},{"v":1.563394},{"v":1.737285},{"v":1.662266},{"v":2.13238},{"v":1.74495},{"v":1.730418},{"v":1.723552},{"v":1.790512},{"v":1.846552},{"v":1.807153},{"v":1.859796},{"v":1.908171},{"v":1.846123},{"v":1.750672},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-57.54144},{"v":-58.77484},{"v":-57.19012},{"v":-53.42612},{"v":-57.18826},{"v":-55.3111},{"v":-54.42715},{"v":-55.91037},{"v":-54.51541},{"v":-55.95123},{"v":-56.42453},{"v":-51.98267},{"v":-52.10809},{"v":-55.15536},{"v":-56.74002},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":28.70212},{"v":55.40252},{"v":28.86355},{"v":49.36506},{"v":35.61129},{"v":40.09902},{"v":27.18469},{"v":38.42016},{"v":29.31555},{"v":40.80931},{"v":46.03962},{"v":35.54672},{"v":38.12959},{"v":23.66553},{"v":18.53208},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":25.99338},{"v":26.19803},{"v":26.17307},{"v":26.15582},{"v":26.1507},{"v":26.12967},{"v":26.14883},{"v":26.13281},{"v":26.13333},{"v":26.12888},{"v":26.15344},{"v":26.14447},{"v":26.15091},{"v":26.11832},{"v":26.125},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_M":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.561868},{"v":1.73105},{"v":1.797044},{"v":1.76599},{"v":2.084661},{"v":1.728261},{"v":1.623273},{"v":1.713252},{"v":1.721168},{"v":1.67675},{"v":1.816809},{"v":1.473725},{"v":2.130508},{"v":1.753807},{"v":1.635349},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.58054},{"v":-54.61621},{"v":-59.66745},{"v":-54.58603},{"v":-56.94119},{"v":-57.44168},{"v":-55.79709},{"v":-56.0144},{"v":-53.07523},{"v":-58.99078},{"v":-54.67191},{"v":-58.43228},{"v":-54.7934},{"v":-53.57614},{"v":-56.65137},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":32.35042},{"v":61.47226},{"v":33.02842},{"v":54.65994},{"v":41.48732},{"v":45.49076},{"v":31.31727},{"v":46.07191},{"v":34.09386},{"v":45.36162},{"v":54.17566},{"v":40.87389},{"v":44.0379},{"v":32.18899},{"v":28.21783},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.08215},{"v":26.27185},{"v":26.24777},{"v":26.23657},{"v":26.23239},{"v":26.21872},{"v":26.23657},{"v":26.21646},{"v":26.21149},{"v":26.21417},{"v":26.23041},{"v":26.21982},{"v":26.23303},{"v":26.20111},{"v":26.2052},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 …2
推荐指数
推荐指数
1
解决办法
解决办法
726
查看次数
查看次数
当数据表输入来自服务器的JSON数据时,更改Google Chart栏颜色
我一直在努力使用谷歌图表API.我在SO PHP MySQL Google Chart JSON上找到了这个精彩的例子- 完整示例.
但是我想知道如何更改dafault蓝色的条形颜色.我对如何使用该{ role: 'style' }功能感到困惑.
这是我的代码:
<?php
$con=mysql_connect("localhost","username","pass") or die("Failed to connect with database");
mysql_select_db("rosac", $con);
$query = mysql_query("
SELECT TarikhLulusTahun AS Tahun, COUNT(*) AS Jumlah
FROM association
GROUP BY TarikhLulusTahun");
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Tahun', 'type' => 'string'),
array('label' => 'Jumlah Persatuan', 'type' => 'number')
({type: 'string', role: 'style'})
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
$temp[] …2
推荐指数
推荐指数
1
解决办法
解决办法
4624
查看次数
查看次数
Google Line Chart上的趋势线
我试图弄清楚如何将趋势线添加到我的谷歌折线图,但我失败了.有人能指出我正确的方向吗？我已经看到google没有提供在折线图上执行此操作的方法,但也看到可以在图表中添加新系列以实现类似的功能.到目前为止,除了没有趋势线之外,这是我的工作.我已经尝试了一些我在网上找到的建议,但没有一个能让数学清晰,让趋势线成为一条直线:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('string', Date);
data.addColumn('number', 'Sales Value');
data.addRow(['Apr 2013', 271176.940000000]);
data.addRow(['May 2013', 419031.540000000]);
data.addRow(['Jun 2013', 429155.540000000]);
data.addRow(['Jul 2013', 443780.400000000]);
data.addRow(['Aug 2013', 320353.540000000]);
data.addRow(['Sep 2013', 310640.910000000]);
data.addRow(['Oct 2013', 252187.700000000]);
data.addRow(['Nov 2013', 301414.560000000]);
data.addRow(['Dec 2013', 224296.850000000]);
data.addRow(['Jan 2014', 291131.140000000]);
data.addRow(['Feb 2014', 354750.680000000]);
data.addRow(['Mar 2014', 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
{
color: …2
推荐指数
推荐指数
1
解决办法
解决办法
4156
查看次数
查看次数
谷歌图表离散轴显示线？
我正在使用具有离散值的谷歌图表,似乎无法绘制vAxis线(黑色).
它出现在连续值中的图形但我不希望图表以这种方式间隔开.
这是两种类型的图表.
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var discreteData = new google.visualization.DataTable();
discreteData.addColumn('string', 'Number');
discreteData.addColumn('number', 'Value');
discreteData.addRows([
['1.492', 10],
['30.701', 17],
['127.469', 6],
['749.382', 11]
]);
var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div'));
discreteChart.draw(discreteData, {
title: 'Discrete Axis Line Chart'
});
var continuousData = new google.visualization.DataTable();
continuousData.addColumn('number', 'Number');
continuousData.addColumn('number', 'Value');
continuousData.addRows([
[1.492, 10],
[30.701, 17],
[127.469, 6],
[749.382, 11]
]);
var continuousChart = new google.visualization.ColumnChart(document.getElementById('continuous_chart_div'));
continuousChart.draw(continuousData, {
title: 'Continuous Axis Line Chart'
});
}
如何绘制vAxis线？
2
推荐指数
推荐指数
1
解决办法
解决办法
4809
查看次数
查看次数
多个Google图表无法在同一页面上正常显示
我在一个页面上显示了4个图表.当单独绘制时它们完美地工作,但是当我尝试超过1时它们并不是全部显示出来.我还注意到,在调整窗口大小(因此刷新图表)时,"活动"图表可能会发生变化.
这是绘制图表的方法:
function drawChart() {
// Occurrences per step
var data_occ = new google.visualization.DataTable();
data_occ.addColumn('string', 'Step');
data_occ.addColumn('number', 'Number');
data_occ.addRows([
['NO_STOP_DEP', 2057],
['FIND_STOPS_DEP', 795],
['FIND_STOPS_ARR', 423],
['FIND_ROUTES', 416],
['FIND_PATHS_0', 416],
['NO_STOP_ARR', 371],
['FIND_PATHS_1', 359],
['JOURNEY_GET_1CONNECTION_FAILED', 274],
['FIND_PATHS_2', 274],
['JOURNEY_GET_1CONNECTION_t1d', 185],
['OK', 147],
['JOURNEY_GET_2CONNECTION_t1d', 145],
['JOURNEY_GET_1CONNECTION_t1a', 138],
['NO_PATH', 129],
['JOURNEY_GET_2CONNECTION_FAILED', 118],
['NO_JOURNEY', 118],
['JOURNEY_GET_1CONNECTION_cs1', 117],
['JOURNEY_GET_1CONNECTION_t2d', 115],
['JOURNEY_GET_DIRECT_t1d', 111],
['JOURNEY_GET_2CONNECTION_t1a', 79],
['JOURNEY_GET_2CONNECTION_cs1', 75],
['JOURNEY_GET_2CONNECTION_t2d', 73],
['JOURNEY_GET_2CONNECTION_t2a', 66],
['JOURNEY_GET_2CONNECTION_cs2', 66],
['JOURNEY_GET_2CONNECTION_t3d', 66],
['JOURNEY_GET_1CONNECTION', 65],
['JOURNEY_GET_DIRECT', 56],
['JOURNEY_GET_DIRECT_FAILED', 54],
['JOURNEY_GET_2CONNECTION', 26],
['NO_ROUTE_ARR', 4],
['NO_ROUTE_DEP', …2
推荐指数
推荐指数
1
解决办法
解决办法
987
查看次数
查看次数
如何使用google geochart为文本启用悬停事件
是否可以将悬停效果与google geochart一起使用,以便地图上的选定区域也会触发区域列表中区域文本颜色的更改？
如果在地图上选择蒙大拿州,我希望列表中的"蒙大拿"这个词有不同的颜色.
我希望你明白我想要实现的目标.
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Province'],
['Montana'],
['Washington'],
['Oregon'],
['California'],
['New York'],
['Connecticut'],
['Alabama'],
['Idaho'],
['Nevada'],
['Nebraska'],
['Colorado'],
['Arizona'],
['New Mexico'],
['Texas'],
['Louisiana'],
['Oklahoma'],
['Virginia'],
['Kentucky'],
['Illinois'],
['Indiana'],
['Arkansas'],
['Louisiana'],
['Mississippi'],
['Georgia'],
['Florida'],
['Missouri'],
['Iowa'],
['Minnesota'],
['South Dakota'],
['North Dakota'],
['Wyoming'],
['Utah'],
['Illinois'],
['Maine'],
['Vermont'],
['Massachussets'],
['Maryland'],
['Delaware'],
['New Jersey'],
['South Carolina'],
['North Carolina'],
['Michigan'],
['Wisconsin'],
['Kansas'],
['Alaska'],
['Hawaii'],
['Rhode Island'],
['District of Colombia'],
['Ohio'],
['West Virginia'],
['Pennsylvania'],
['Tennessee'],
['New Hampshire']
]);
var options …2
推荐指数
推荐指数
1
解决办法
解决办法
612
查看次数
查看次数