分享程序员开发的那些事...
更新时间：2023-11-14 18:13:10
现在看来似乎是不可能的文本格式，我试图用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>