google chart显示全部顶点的tooltip
2012-9-18更新：IE9部分浏览器支持svg绘图，修改了获取路径的方法。由于IE得到的path信息会多一些空格出来，改为用正则获取顶点信息
今天在csdn看到一个使用google chart绘制LineChart图标，需要提示显示全部显示出来，而不是当鼠标悬浮到顶点的时候才显示提示信息tooltip。
下午看了下google chart的api文档，没有发现有显示全部提示信息的配置项目，隐藏提示信息tooltip的配置项目到是有一个： tooltip:{trigger:'none'}，trigger默认有2个配置值，一个是'none'，不显示tooltip；一个是hover，鼠标移动到顶点的时候显示。
研究了下google chart生成的HTML结构后，google chart将canvas或者vml绘制在一个iframe里面。
解决方法：获取iframe里面的vml或者canvas的曲线图路径配置，然后使用js+div模拟。canvas为path，IE为v:shape对象【有多个，需要遍历对象数组获取到绘制的路径对象。】
源代码如下，下面代码自己保存为html文件查看，运行代码加载google chart api时出错。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style type="text/css">
.pop{border:solid 1px #000;width:100px;height:50px;position:absolute;z-index:10000}/*可以增加背景图片什么的美化一下tooltip*/
</style>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
var chart, canvas, data = [['Year', 'Sales'], ['2004', 1000], ['2005', 1170], ['2006', 660], ['2007', 1030]];
function getPath() {
var doc = document.getElementById('chart_div').getElementsByTagName('iframe')[0].contentWindow.document;
if (doc.readyState == 'complete') {
clearInterval(window.timer);
var vml = doc.body.innerHTML.toLowerCase().indexOf('<svg')==-1, line = doc.getElementsByTagName(vml ? 'shape' : 'path');
if (vml) {
for (var i = 0, j = line.length; i < j; i++)
if (line[i].getAttribute('logicalname') == 'line#0') { line = line[i]; break; }
}
else line = line[0];
drawTooltip(vml ? line.path.value : line.getAttribute('d'));
}
}
function drawTooltip(p) {
var points = p.match(/\d+(\.\d+)?/g), pop, dv = document.getElementById('chart_div'), idx = 1,dataItem;
for (var i = 0, j = points.length; i < j; i += 2) {
pop = document.createElement('div');
pop.className = 'pop';
pop.style.left = points[i] + 'px';
pop.style.top = points[i + 1] + 'px';
dataItem = data[idx];
idx++;
pop.innerHTML = 'Year:' + dataItem[0]+'<br/>'+dataItem[1];
dv.appendChild(pop);
}
}
function drawChart() {
var data = google.visualization.arrayToDataTable(window.data);
var options = { title: 'Company Performance', tooltip: {trigger:'none'} };
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
// google.visualization.events.addListener(chart, 'ready', function () {});//IE不触发ready事件，只好用计时器来检查iframe的readystate了
window.timer = setInterval(getPath, 500);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;position:relative;"></div>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：google chart显示全部顶点的tooltip