Google Charts DataView Tooltip HTML呈现为字符串

Question

# I know rows parse correctly as the chart does render
@data = new google.visualization.arrayToDataTable rows
if @get('tooltipCol') isnt false
  (columns or []).forEach (col, index)=>
    if index is 0
      return
    # This sets every other column as a tooltip
    if not (index % 2)
      @data.setColumnProperties( index, {
        type: 'string'
        role: 'tooltip'
        'p': { 'html': true }
      })

# This starts another function where @data is the actual table data from above
view = new google.visualization.DataView(@data)

# data here is the model options which includes data.tooltip.isHtml: true
@chart.draw view, data

My chart data is parsed fine. It even seems to recognize that I want the tooltip to be html as the rendering is slightly different.

But it basically just renders the html as text instead of parsed html.

There are quite a few questions on SO asking the same question but none seem to deal with the DataView. Here is one : Google Charts - full html in tooltips

I'm using the DataView as I use a custom legend to hide and show columns. (the whole process of tooltips in Google charts makes this very convoluted) Anyway, everything works except for the parsing of html.

Any suggestions. BTW, the above code is just snippets. Hopefully you can follow along, if not I can post some more.

In response to tmdean

I tried, view.toDataTable() and could not get the html to parse with that, which surprised me. So I then use @chart.draw @data, data to use the original DataTable. This did not work either so I thought perhaps I was doing something wrong.

I ran data.getColumnProperties(2) (data here is an exported variable to the console which references @data in the code) Which should be my first tooltip and this is what I got:

It appears to see that.

I also made sure I was passing in data.tooltip.isHtml:true and I am

I'm at a loss at the moment. Seems like this should be an easy thing to do. Do I need to encode my html or anything?

Answer 1

This is a poorly documented feature (setting existing column to tooltip), but have found an answer. The p : {html: true} is actually an abbreviature of properties:{html: true} . So my guess was: Why use a method called setColumnProperties and put as a parameter properties ? Well, tried to remove that and it worked:

data.setColumnProperties( 2, {
   role: 'tooltip',
   html: true 
})  

Answer 2

Have you tried converting your DataView to a DataTable prior to rendering it? Just call toDataTable() on the DataView.

Google Visualization has a lot of quirks when rendering DataViews. It's usually best to just convert to a DataTable even though there's a (usually actually pretty small) performance penalty.