Javascript 谷歌图表,如何在语音泡泡中显示额外信息
如何将更多信息附加到google图表条目。我的折线图有以下内容:Javascript 谷歌图表,如何在语音泡泡中显示额外信息,javascript,google-visualization,Javascript,Google Visualization,如何将更多信息附加到google图表条目。我的折线图有以下内容: data.addColumn('date', 'Date'); data.addColumn('number', 'a name'); data.addColumn('number', 'a name 2'); data.addColumn('number', '
data.addColumn('date', 'Date');
data.addColumn('number', 'a name');
data.addColumn('number', 'a name 2');
data.addColumn('number', 'a name 3');
data.addRows( [
[new Date( 2013, 7, 1 ),1.5,null,null],
[new Date( 2013, 6, 28 ),-1.5,null,null],
[new Date( 2013, 6, 21 ),null,-1,null],
[new Date( 2013, 6, 15 ),null,0,2],
[new Date( 2013, 6, 7 ),1.5,null,null],
[new Date( 2013, 6, 5 ),-1,null,null],
[new Date( 2013, 6, 1 ),0.5,2,null],
] );
在哪里可以添加这些信息,使其看起来像这样
谷歌api对我来说毫无意义!!!我尝试过添加另一个带有工具提示的列,但是你到底是如何为每个点添加信息的呢。真奇怪 您需要做的是引入至少一个工具提示列。每个工具提示列都会立即应用于左侧的系列列,因此,如果要在第二列之后插入字符串列,并将其角色设置为“工具提示”,则第一个系列将具有自定义工具提示(从屏幕截图来看,它看起来像是蓝色系列)。每个系列都可以有一个工具提示列,这基本上就是获得逐点工具提示的方式。下面是一个JSFIDLE示例,演示了工具提示机制: 在小提琴中,第一个示例在第一个系列(蓝色)上有工具提示。您将注意到,第二点没有自定义工具提示,这使其默认为常规工具提示 第二个示例在第二个系列上有工具提示(红色) 最后,第三个示例在这两个方面都有工具提示
希望这有帮助。尝试使用此代码使用html标记自定义工具提示内容
data.addRows([
['2010', 600, customTooltip('$600K in our first year!')],
['2011', 1500, customTooltip('Sunspot activity made this our best year ever!')],
['2012', 800, customTooltip('$800K in 2012.')],
['2013', 1000, customTooltip('$1M in sales last year.')]
]);
function customTooltip(text) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<table id="medals_layout">' + '<tr>' +
'<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';
}
data.addRows([
['2010',600,customTooltip('60万美元在我们的第一年!']),
['2011',1500,customTooltip('太阳黑子活动使今年成为我们有史以来最好的一年!']),
['2012',800,自定义工具提示('2012年$800K.')],
['2013',1000,customTooltip(去年销售额为100万美元)。]
]);
函数自定义工具提示(文本){
返回“”+
'' + '' +
''+文本+''+''+''+''+'';
}
看看这个示例,如果您想在其中包含按钮、图像或其他内容,也可以使用它。
data.addRows([
['2010', 600, customTooltip('$600K in our first year!')],
['2011', 1500, customTooltip('Sunspot activity made this our best year ever!')],
['2012', 800, customTooltip('$800K in 2012.')],
['2013', 1000, customTooltip('$1M in sales last year.')]
]);
function customTooltip(text) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<table id="medals_layout">' + '<tr>' +
'<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';
}