2014-09-04 72 views
3

我在我的項目中使用谷歌折線圖,我已經有了一個自定義工具提示的問題。Google LineChart <undefined> HTML標記與html工具提示

撥弄這個問題:http://jsfiddle.net/nq7sk6mq/7/

我想使用HTML工具提示和我的表設置爲:

if google 
    google.load "visualization", "1.0", 
    packages: ["corechart"] 
    callback: -> 
     data = new google.visualization.DataTable() 
     data.addColumn('number', ' v1') 
     data.addColumn('number', 'v2') 
     data.addColumn({type:'boolean',role:'certainty'}) 
     data.addColumn('number', 'v3') 
     data.addColumn({type:'boolean',role:'certainty'}) 
     data.addColumn('number', 'v4') 
     data.addColumn({type:'boolean',role:'certainty'}) 
     data.addColumn({type: 'string', role: 'tooltip','p':{'html': 'true'}}) 

我爲它的數據:

values.push [ 
      iterator, 
      values2[iterator], 
      true, 
      values3[iterator], 
      true, 
      values4[iterator], 
      false, 
      customTooltip()] 

選項:

options = { 
     legend:{position:"top"}, 
     vAxes: { 
      0: {}, 
     }, 
     hAxis: { 
      ticks: data.getDistinctValues(0) 
     }, 
     series:{ 
      0: {pointSize: 5, color: "#0f8d4c"}, 
      1: {pointSize: 5, color: "#b74848"}, 
      2: {color: "#00a259", pointSize: 4} 
     }, 

     width : width, 
     tooltip: {isHtml: true} 
     } 

調用draw:

google.setOnLoadCallback(drawChart(values,chartid,options)) 
drawChart: (data, chartid,options) -> 
    chart = new google.visualization.LineChart(document.getElementById(chartid)); 
    chart.draw(data,options) 

customTooltip:

customTooltip:() -> 
return '<div style="padding:5px 5px 5px 5px; height:20px;">' + 
    "<p>Teeest</p>"+ 
'</div>' 

我在Chrome中得到:

<div> 
    <undefined class="google-visualization-tooltip" style="width: 66px; height: 20px; left: 181.5px; top: 133.5px;"> 
    <div style="padding:5px 5px 5px 5px; height:20px;"> 
     <p>Teeest</p> 
    </div> 
    </undefined> 
</div> 

圖表顯示正確,如果使用普通的工具提示,他們也可以正常工作。所以我的問題是爲什麼我得到這個正在破壞工具提示佈局的未定義標籤?

我發現不僅我是遇到這個問題的人。 http://code.google.com/p/google-visualization-api-issues/issues/detail?id=1290

+0

你可以做一個jsfiddle嗎? – juvian 2014-09-04 17:58:29

+0

我是jsfiddle的新手,並且遇到問題(正在尋找工作示例,但是我的程序可能會錯誤地檢查它嗎?)http://jsfiddle.net/nq7sk6mq/4/ – Cisuuable 2014-09-08 07:18:00

+1

@ciuuable here:http:/ /jsfiddle.net/nq7sk6mq/5/ – juvian 2014-09-08 17:14:27

回答

0

根據@juvian幫助問題是造型設置內聯div div cointainer,似乎工具提示從div繼承它。所以答案是從div容器中刪除樣式並將其應用到所需的元素。