我可以定制谷歌Geochart图表中的工具提示文本? [英] Can I customize the tooltip text in a Google Geochart chart?
问题描述
下面是code我使用的基础上,一个我在谷歌的如何找到文档,但我不知道这是否适用于 Geochart ,如果我这样做是正确的,或者有一些其他的方式做了Geochart。
如果我不包括工具提示栏这code正常工作。当我这样做,我得到了错误的不兼容的数据表:错误:表中包含更多的列比预期(2期待列),的显示,其中Geochart应
<一个href=\"http://stackoverflow.com/questions/6013053/how-to-change-tooltip-text-for-google-chart-api\">This问题解决同样的问题,但没有具体的Geochart。
&LT;脚本类型=文/ JavaScript的SRC =的https://www.google.com/jsapi &GT;&LT; / SCRIPT&GT;
&LT;脚本类型=文/ JavaScript的'&GT; 的google.load('可视化','1',{'包':['geochart']});
google.setOnLoadCallback(drawRegionsMap); 功能drawRegionsMap()
{ VAR数据= google.visualization.arrayToDataTable([
['国家','关联',{类型:'字符串'作用:'提示'}],
['阿拉巴马',3,'提示测试文本'],
['亚利桑那',1,'提示测试文本'],
]); VAR的选择=
{
区域:'美国',
分辨率:'省',
}; VAR图=新google.visualization.GeoChart(的document.getElementById('chart_div'));
chart.draw(数据,选项); };&LT; / SCRIPT&GT;
现在看来似乎是不可能的文本格式,我试图用GeoChart工具的具体方式。下面是我终于想出了解决方案,并渲染图:
渲染与地图浏览工具提示
PHP和放大器; JavaScript的code
&LT;! - 生成地理地图 - &GT;
&LT;脚本类型=文/ JavaScript的SRC =的https://www.google.com/jsapi'>&LT; / SCRIPT&GT;
&LT;脚本类型=文/ JavaScript的'&GT; 的google.load('可视化','1',{'包':['geochart']});
google.setOnLoadCallback(drawRegionsMap); 功能drawRegionsMap()
{ //创建数据表
VAR数据= google.visualization.arrayToDataTable([
&LT;?PHP的echo $ data_table; ?&GT;
]); //创建图表对象
VAR图=新google.visualization.GeoChart(
的document.getElementById('chart_div')
); //定义数据工具提示
VAR格式=新google.visualization.PatternFormat('{0}');
formatter.format(数据,[0,1],1);
VAR格式=新google.visualization.PatternFormat({2});
formatter.format(数据,[0,1,2],0); //定义数据图表值
VAR视图=新google.visualization.DataView(数据);
view.setColumns([0,1]); //此图表设置选项
VAR的选择=
{
宽度:&LT; PHP的echo $宽度; ?&gt;中
区域:'美国',
分辨率:'省',
colorAxis:{颜色:['#abdfab,#006600]},
传说:'无'
}; //绘制图表
chart.draw(视图选项); };&LT; / SCRIPT&GT;&LT; DIV ID =chart_div的风格=WIDTH:&LT; PHP的echo $宽度;&GT;像素;高度:???&LT; PHP的回声$高度;&GT; PX;&GT;&LT; / DIV&GT;
渲染HTML
&LT;脚本类型=文/ JavaScript的SRC =的https://www.google.com/jsapi'>&LT; / SCRIPT&GT;
&LT;脚本类型=文/ JavaScript的'&GT; 的google.load('可视化','1',{'包':['geochart']});
google.setOnLoadCallback(drawRegionsMap); 功能drawRegionsMap()
{ //创建数据表
VAR数据= google.visualization.arrayToDataTable([
['国家','中','字符串'],
[亚利桑那,2,有设施,销售直接'],
['加州',4'的基金,拥有分销商,销售直接'],
['科罗拉多',1,卖直]
['佛罗里达',1,'有经销商'],
['格鲁吉亚',1,'有经销商'],
['爱达荷',1,塞尔斯直接'],
['伊利诺伊州',1,'有经销商'],
['印第安纳',1,'有经销商'],
['爱荷华',1,拥有分销'],
['堪萨斯',1,拥有分销'],
['肯塔基',1,拥有分销'],
['路易斯安那州',1,'有经销商'],
[马里兰,2,已经发行'],
[蒙大拿,1,卖直]
[内华达,2,有设施,销售直接'],
['新墨西哥',2,'有设施,销售直接'],
['北卡罗莱纳州',1,'有经销商'],
[北达科他州',1,'有经销商'],
[俄克拉何马,1,卖直]
['俄勒冈州',1,卖直]
['宾夕法尼亚',1,'有经销商'],
['南卡罗来纳州',1,'有经销商'],
['田纳西',1,拥有分销'],
['得克萨斯',1,'有经销商'],
[犹他,2,有设施,销售直接'],
['华盛顿',1,卖直]
['怀俄明',1,塞尔斯直接'],]); //创建图表对象
VAR图=新google.visualization.GeoChart(
的document.getElementById('chart_div')
); //定义数据工具提示
VAR格式=新google.visualization.PatternFormat('{0}');
formatter.format(数据,[0,1],1);
VAR格式=新google.visualization.PatternFormat({2});
formatter.format(数据,[0,1,2],0); //定义数据图表值
VAR视图=新google.visualization.DataView(数据);
view.setColumns([0,1]); //此图表设置选项
VAR的选择=
{
宽度:286,
区域:'美国',
分辨率:'省',
colorAxis:{颜色:['#abdfab,#006600]},
传说:'无'
}; //绘制图表
chart.draw(视图选项); };&LT; / SCRIPT&GT;&LT; DIV ID =chart_div的风格=WIDTH:286px;高度:180像素;&GT;&LT; / DIV&GT;
Below is the code I'm using, based on a how to I found in Google's documentation, but I'm not sure if it applies to the Geochart, if I'm doing it right, or if there is some other way to do it for a Geochart.
This code works fine if I don't include the tooltip column. When I do, I get the error "Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)," displayed where the Geochart should be.
This question addresses the same issue, but not specifically for a 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([
[ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ],
[ 'Alabama', 3, 'tooltip test text' ],
[ 'Arizona', 1, 'tooltip test text' ],
]);
var options =
{
region: 'US',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
chart.draw( data, options );
};
</script>
It seems like it is impossible to format the text the exact way I was attempting to with the GeoChart tool. Below is the solution I finally came up with and the rendered map:
Rendered Map with Tooltip View
PHP & JavaScript Code
<!-- generate geo map -->
<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()
{
// create data table
var data = google.visualization.arrayToDataTable([
<?php echo $data_table; ?>
]);
// create chart object
var chart = new google.visualization.GeoChart(
document.getElementById( 'chart_div' )
);
// defines the data for the tooltip
var formatter = new google.visualization.PatternFormat('{0}');
formatter.format( data, [0,1], 1 );
var formatter = new google.visualization.PatternFormat('{2}');
formatter.format( data, [0,1,2], 0 );
// defines the data for the chart values
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
// set options for this chart
var options =
{
width: <?php echo $width; ?>,
region: 'US',
resolution: 'provinces',
colorAxis: { colors: ['#abdfab', '#006600'] },
legend: 'none'
};
// draw chart
chart.draw( view, options );
};
</script>
<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div>
Rendered HTML
<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()
{
// create data table
var data = google.visualization.arrayToDataTable([
[ 'State', 'in', 'String' ],
[ 'Arizona', 2, 'Has Facility, Sells Direct' ],
[ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ],
[ 'Colorado', 1, 'Sells Direct' ],
[ 'Florida', 1, 'Has Distributor' ],
[ 'Georgia', 1, 'Has Distributor' ],
[ 'Idaho', 1, 'Sells Direct' ],
[ 'Illinois', 1, 'Has Distributor' ],
[ 'Indiana', 1, 'Has Distributor' ],
[ 'Iowa', 1, 'Has Distributor' ],
[ 'Kansas', 1, 'Has Distributor' ],
[ 'Kentucky', 1, 'Has Distributor' ],
[ 'Louisiana', 1, 'Has Distributor' ],
[ 'Maryland', 2, 'Has Distributor' ],
[ 'Montana', 1, 'Sells Direct' ],
[ 'Nevada', 2, 'Has Facility, Sells Direct' ],
[ 'New Mexico', 2, 'Has Facility, Sells Direct' ],
[ 'North Carolina', 1, 'Has Distributor' ],
[ 'North Dakota', 1, 'Has Distributor' ],
[ 'Oklahoma', 1, 'Sells Direct' ],
[ 'Oregon', 1, 'Sells Direct' ],
[ 'Pennsylvania', 1, 'Has Distributor' ],
[ 'South Carolina', 1, 'Has Distributor' ],
[ 'Tennessee', 1, 'Has Distributor' ],
[ 'Texas', 1, 'Has Distributor' ],
[ 'Utah', 2, 'Has Facility, Sells Direct' ],
[ 'Washington', 1, 'Sells Direct' ],
[ 'Wyoming', 1, 'Sells Direct' ], ]);
// create chart object
var chart = new google.visualization.GeoChart(
document.getElementById( 'chart_div' )
);
// defines the data for the tooltip
var formatter = new google.visualization.PatternFormat('{0}');
formatter.format( data, [0,1], 1 );
var formatter = new google.visualization.PatternFormat('{2}');
formatter.format( data, [0,1,2], 0 );
// defines the data for the chart values
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
// set options for this chart
var options =
{
width: 286,
region: 'US',
resolution: 'provinces',
colorAxis: { colors: ['#abdfab', '#006600'] },
legend: 'none'
};
// draw chart
chart.draw( view, options );
};
</script>
<div id="chart_div" style="width: 286px; height: 180px;"></div>
这篇关于我可以定制谷歌Geochart图表中的工具提示文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!