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>新闻热点
疑难解答
