我可以自定义 Google Geochart 图表中的工具提示文本吗？
Posted
技术标签:
【中文标题】我可以自定义 Google Geochart 图表中的工具提示文本吗？【英文标题】：Can I customize the tooltip text in a Google Geochart chart? 【发布时间】：2012-08-01 03:30:19 【问题描述】：下面是我正在使用的代码，基于a how to I found in Google's documentation，但我不确定它是否适用于Geochart，如果我做得对，或者是否有其他方法可以做它用于 Geochart。
如果我不包含工具提示列，此代码可以正常工作。当我这样做时，我得到错误“不兼容的数据表：错误：表包含比预期更多的列（预期 2 列）”，显示在 Geochart 应该在的位置。
This question 解决了同样的问题，但不是专门针对 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>
【问题讨论】：
【参考方案1】：要自定义工具提示以使用包含新行/图像的 html，请查看以下示例： http://jsfiddle.net/SD4KA/
google.load('visualization', '1.1', packages: ['geochart'], callback: drawVisualization);
function drawVisualization()
var data = google.visualization.arrayToDataTable([
['Country', 'Value', role: 'tooltip', p:html:true],
['Russia', 5, 'Hello world<br>test'],
['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
chart.draw(data,
width: 800,
height: 600,
tooltip:
isHtml: true
);
从 v1.1 开始 geochart 支持 html 的工具提示
【讨论】：
【参考方案2】：我能够在工具提示中包含我想要的文本，包括这种方式的值：
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn(type:'string', role:'tooltip'); //
data.addRows([
[v:"US",f:"United States of America",1,"21% of Visits"],
[v:"GB",f:"United Kingdom",2,"7% of visits"],
[v:"DE",f:"Germany",3,"6% of visits"],
[v:"FR",f:"France",4,"5% of visits"],
[v:"ES",f:"Spain",5,"5% of visits"],
[v:"CA",f:"Canada",6,"4% of visits"],
[v:"IT",f:"Italy",7,"4% of visits"],
[v:"NL",f:"The Netherlands",8,"4% of visits"],
[v:"BR",f:"Brazil",9,"4% of visits"],
[v:"TR",f:"Turkey",10,"3% of visits"],
[v:"IN",f:"India",11,"3% of visits"],
[v:"RU",f:"Russia",12,"3% of visits"],
[v:"AU",f:"Australia",13,"2% of visits"],
]);
这样，例如“美国”将是工具提示的第 1 行，而“21% 的访问”将是第二行。使用这种格式，我可以在工具提示中包含我想要的任何文本，在两行中。
【讨论】：
您好，是否可以显示同一国家/地区的两个结果？等等，对于 GB，我可以得到一个结果：[v:"GB",f:"g.Britain south",12,"3% of visits"]，如果我在国家南部徘徊，并且还显示如果我将鼠标悬停在国家/地区北部，则再次为 gb 生成结果：[v:"GB",f:"g.Britain north",12,"13% of visit"] ? Pavlen，在查看世界地图或欧洲地图时，这是不可能的。当分辨率设置为国家/地区时，API 不允许您细分国家/地区。另一种方法是使用标记，因此您可以在南北绘制标记，或者使用选项 region:'GB' 仅显示 GB 和 'resolution:provinces' 来分解 GB，但这仍然有限制。 【参考方案3】：this thread 中提供了三种替代方案
手动设置数据点的格式化值（使用#setFormattedValue() DataTable 方法） 在 DataTable 列上使用 formatters 之一 在数据表中包含一个“tooltip”角色列
我个人用过第一个，你的例子应该是这样的
var data = google.visualization.arrayToDataTable([
[ 'State', 'Relevance' ],
[ 'Alabama', v: 3, f: 'tooltip test text' ],
[ 'Arizona', v: 1, f: 'tooltip test text' ],
]);
【讨论】：
您知道如何在工具提示中添加新行吗？我已经尝试过通常的\n \r <br /> <br> 等。
我无法在格式文本中添加换行符或 HTML :(
我无法完成这项工作。我也在使用 arrayToDataTable 来获取我的数据集，但是这种方法对我不起作用。【参考方案4】：
我在散点图上遇到了类似的问题。我必须使用arrayToDataTable 将数据放入图表，而不是其他答案中建议的DataTable() 和addColumn()。
为了让它工作，您可以像当前一样调用arrrayToDataTable() 并将其保存到变量数据中。
然后，您需要指定要将哪一列视为工具提示（并且您还必须指定应绘制哪些列）。在以下示例中，第 0 列和第 1 列包含绘图数据，第 2 列包含工具提示字符串。
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, sourceColumn: 2,role:'tooltip']);
最后，您必须使用视图变量而不是数据变量来调用绘制：
chart.draw(view, options);
【讨论】：
您是否能够将工具提示呈现为带有新行/图像的 html？谢谢【参考方案5】：似乎无法按照我尝试使用 GeoChart 工具的方式来格式化文本。下面是我最终想出的解决方案和渲染的地图：
带有工具提示视图的渲染地图
PHP 和 JavaScript 代码
<!-- 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>
呈现的 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>
【讨论】：
以上是关于我可以自定义 Google Geochart 图表中的工具提示文本吗？的主要内容，如果未能解决你的问题，请参考以下文章