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
你可以做一个jsfiddle吗? – juvian 2014-09-04 17:58:29
我是jsfiddle的新手,并且遇到问题(正在寻找工作示例,但是我的程序可能会错误地检查它吗?)http://jsfiddle.net/nq7sk6mq/4/ – Cisuuable 2014-09-08 07:18:00
@ciuuable here:http:/ /jsfiddle.net/nq7sk6mq/5/ – juvian 2014-09-08 17:14:27