2014-09-04 35 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容器中删除样式并将其应用到所需的元素。