工具提示无法正常工作的Google饼图

Question

我创建了一个波纹管状的饼图，除工具提示外，其他所有方法都可以正常工作。 我需要使用自定义html重新设计工具提示设计，但是它没有按我的期望显示标签。它以字符串形式显示html。请参阅小提琴。

  google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addColumn({type: 'string', role: 'tooltip'}); data.addRows([ ['Work', 11,'<p>tooltip 1</p>'], ['Eat', 2,'<p>tooltip 1</p>'], ['Commute', 2,'<p>tooltip 1</p>'], ['Watch TV', 2,'<p>tooltip 1</p>'], ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piechart" style="width: 900px; height: 500px;"></div> 

Answer 1

还要添加选项“ tooltip：{isHtml：true}”

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addColumn({type: 'string', role: 'tooltip', 'p': {'html':true}}); data.addRows([ ['Work', 11,'<p>tooltip 1</p>'], ['Eat', 2,'<p>tooltip 1</p>'], ['Commute', 2,'<p>tooltip 1</p>'], ['Watch TV', 2,'<p>tooltip 1</p>'], ]); var options = { tooltip: {isHtml: true}, //Add this line title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piechart" style="width: 900px; height: 500px;"></div> 

Answer 2

您可以通过Javascript Dom解析器将HTML字符串转换为DOM元素，如以下代码所示：

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var Converter = new DOMParser();
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addColumn({ type: 'string', role: 'tooltip' });
    data.addRows([
        ['Work', 11, Converter.parseFromString("<p>tooltip 1</p>", "text/html")],
        ['Eat', 2, Converter.parseFromString("<p>tooltip 1</p>", "text/html")],
        ['Commute', 2, Converter.parseFromString("<p>tooltip 1</p>", "text/html")],
        ['Watch TV', 2, Converter.parseFromString("<p>tooltip 1</p>", "text/html")],
    ]);

    var options = {
        title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}