[英]Google Geochart (1.1) tooltip styles
I'm using Google's Geochart and following a bunch of the examples and options here: https://developers.google.com/chart/interactive/docs/gallery/geochart and generally it's been successful, but I'm curious about two things: 我正在使用Google的Geochart,并在此处跟踪了许多示例和选项: https : //developers.google.com/chart/interactive/docs/gallery/geochart ,通常它已经成功了,但是我对两件事感到很好奇:
tooltip
. 是否可以定义tooltip
的宽度,边框等。 tooltip
but it doesn't seem to be working. 我正在尝试更改tooltip
的字体大小,但似乎不起作用。 I am using version 1.1 as it allows for HTML in the tooltip, but I cannot find any documentation for this anywhere. 我正在使用1.1版,因为它允许在工具提示中使用HTML,但是我在任何地方都找不到此文档。
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
['United Kingdom', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.'],
['United States', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.'],
['China', 2, 'Hello China'],
['Brazil', 2, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']
]);
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
fontSize: 21
}
},
colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
};
var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
chart.draw(data, options);
}
<div id="chart-canvas" style="height:500px;"></div>
For the sake of all our sanity, I have set up a jsFiddle http://jsfiddle.net/w5DYt/ 为了我们的理智,我建立了一个jsFiddle http://jsfiddle.net/w5DYt/
Thanks, R 谢谢,R
1) Google doesn't support this, however you can manually overwrite it: 1)Google不支持此功能,但是您可以手动覆盖它:
.google-visualization-tooltip{
width:100px !important;
border: 2px solid red !important;
}
2) the isHtml: true
overrides your textStyle configuration, you should wrap you text in a span with a class and then use css to set your desired textStyle 2) isHtml: true
覆盖您的textStyle配置,您应该使用一个类将文本包装在一个范围内,然后使用CSS设置所需的textStyle
3) Google doesn't support click handler, but has a selection one. 3)Google不支持点击处理程序,但是有一个选择项。 You could do something like this: 您可以执行以下操作:
var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
function ready(){
google.visualization.events.addListener(chart, 'select', handler);
function handler(){
var selection=chart.getSelection();
if(selection.length==1){
console.log(data.getValue(selection[0].row,2))
}
}
}
google.visualization.events.addListener(chart, 'ready', ready);
chart.draw(data, options);
Full fiddle: http://jsfiddle.net/w5DYt/1/ 完整的提琴: http : //jsfiddle.net/w5DYt/1/
You can wrap your tooltip contents in a div and use a class (or inline styles) to style it: 您可以将工具提示内容包装在div中,然后使用类(或内联样式)对其进行样式设置:
[javascript] [javascript]
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
['United Kingdom', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>'],
['United States', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>'],
['China', 2, '<div class="tooltip">Hello China</div>'],
['Brazil', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>']
]);
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
fontSize: 21
}
},
colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
};
var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
chart.draw(data, options);
}
[CSS] [CSS]
.tooltip {
width: 200px;
min-height: 50px;
}
There are two events you can use to capture clicks: select
and regionClick
. 您可以使用两个事件来捕获点击: select
和regionClick
。 select
(as demonstrated by juvian) works when a user clicks on a region where there is data (UK, US, China, Brazil, in your example); 当用户单击有数据的区域(在您的示例中为英国,美国,中国,巴西)时, select
(如juvian所示)有效; regionClick
fires when any region is clicked, even if it is not in your data set, and returns an object with a region
property the holds the ISO code for the region: 单击任何区域时,即使该区域不在您的数据集中,也将触发regionClick
,并返回一个具有region
属性的对象,该对象保存该region
的ISO代码:
google.visualization.events.addListener(chart, 'regionClick', function (e) {
// e.region contains the ISO code for the clicked region
});
http://jsfiddle.net/asgallant/w5DYt/3/ http://jsfiddle.net/asgallant/w5DYt/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.