Google Chart HTML工具提示会显示html文本

时间:2014-02-18 17:19:17

标签: html charts tooltip google-visualization dataview

我在选项中指定了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);

1 个答案:

答案 0 :(得分:4)

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