Question

我创建了一个像波纹管一样的饼图，除了工具提示外，一切正常。我需要使用我的自定义html重新设计工具提示设计。但它没有显示我期望的标签。它将html显示为字符串。请看小提琴......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

添加选项＆＃34;工具提示：{isHtml：true}＆＃34;太

＆＃13;

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

＆＃13;

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

＆＃13;

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

工具提示不起作用谷歌饼图

2 个答案: