谷歌折线图<未定义>带有Html工具提示的Html标记

Google LineChart <undefined> Html tag with html tooltip

本文关键字：Html 工具提示 标记 带有 未定义 折线图 lt 谷歌 gt      更新时间：2023-09-26

我在项目中使用谷歌折线图，在自定义工具提示时遇到了一些问题。

处理这个问题：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}
      }

调用抽签：

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

根据@juvian的帮助，问题是样式是在div cointainer上内联设置的，工具提示似乎从div继承了它。所以答案是从div容器中删除样式，并将其应用于所需元素。

相关文章：