Google Chart HTML Tooltip 显示 html 文本

Question

我在选项中指定了 HTML 工具栏，但它仍然在工具提示中呈现 HTML 文本，而不是 HTML 的结果。我该如何解决这个问题，以便它呈现 HTML 结果？

我创建了一个数据视图并像这样设置列：

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);

Answer 1

在视图的计算列中指定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>';
    }
}]);