Google图表HTML工具提示显示HTML文本 [英] Google Chart HTML Tooltip displays html text

问题描述

我在选项中指定了HTML工具，但它仍然在工具提示中呈现HTML文本，而不是HTML的结果。

I've specified HTML toolips in the options, but it still renders the HTML text in the tooltip instead of the result of the HTML. How can I fix this so that it renders the HTML result?

我创建了一个数据视图，并设置如下：

I create a data view and set the columns like so:

projectView.setColumns([0,1,3,{
    type:'string',
    role:'tooltip',
    calc:function(dt,row){
        var date = dt.getFormattedValue(row,0);
        var totalErrors = dt.getFormattedValue(row,3);
        var percent = Math.round((dt.getValue(row,3)/dt.getValue(row,1))*100);  
        return '<div><b>'+ date +'</b><br><b>Error Percent: </b>' + percent + '<br><b>Total Errors: </b>' + totalErrors + '</div>';
    }
}]);

选项如下：

var options = {
    width:850,
    height:375,
    chartArea: {width: '70%', height: '70%',left: 40,top:25},
    hAxis:{format:'MM/dd/yy'},
    vAxis:{logScale:false},         
    series:{0:{type:'line'},1:{type:'area'}},
    tooltip: { isHtml: true }};

然后我绘制图表：

var projectChart = new google.visualization.ComboChart(document.getElementById('project_chart_div'));
projectChart.draw(projectView, options);

推荐答案

指定 html 属性作为视图的计算列中的 true ：

projectView.setColumns([0,1,3,{
    type:'string',
    role:'tooltip',
    properties: {
        html: true
    },
    calc:function(dt,row){
        var date = dt.getFormattedValue(row,0);
        var totalErrors = dt.getFormattedValue(row,3);
        var percent = Math.round((dt.getValue(row,3)/dt.getValue(row,1))*100);  
        return '<div><b>'+ date +'</b><br><b>Error Percent: </b>' + percent + '<br><b>Total Errors: </b>' + totalErrors + '</div>';
    }
}]);

这篇关于Google图表HTML工具提示显示HTML文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！