IE9部分瀏覽器支持svg繪圖，修改了獲取路徑的方法。由于IE得到的path信息會(huì)多一些空格出來(lái)，改為用正則獲取頂點(diǎn)信息
今天在csdn看到一個(gè)使用google chart繪制LineChart圖標(biāo)，需要提示顯示全部顯示出來(lái)，而不是當(dāng)鼠標(biāo)懸浮到頂點(diǎn)的時(shí)候才顯示提示信息tooltip。
下午看了下google chart的api文檔，沒(méi)有發(fā)現(xiàn)有顯示全部提示信息的配置項(xiàng)目，隱藏提示信息tooltip的配置項(xiàng)目到是有一個(gè)： tooltip:{trigger:'none'}，trigger默認(rèn)有2個(gè)配置值，一個(gè)是'none'，不顯示tooltip；一個(gè)是hover，鼠標(biāo)移動(dòng)到頂點(diǎn)的時(shí)候顯示。
研究了下google chart生成的HTML結(jié)構(gòu)后，google chart將canvas或者vml繪制在一個(gè)iframe里面。
解決方法：獲取iframe里面的vml或者canvas的曲線圖路徑配置，然后使用js+div模擬。canvas為path，IE為v:shape對(duì)象【有多個(gè)，需要遍歷對(duì)象數(shù)組獲取到繪制的路徑對(duì)象。】
源代碼如下，下面代碼自己保存為html文件查看，運(yùn)行代碼加載google chart api時(shí)出錯(cuò)。
<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不觸發(fā)ready事件，只好用計(jì)時(shí)器來(lái)檢查iframe的readystate了 window.timer = setInterval(getPath, 500); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;position:relative;"></div> </body></html>新聞熱點(diǎn)
疑難解答
圖片精選
