工具提示不工作谷歌餅圖

我創建了一個像波紋管的餅圖，除了工具提示，一切正常。我需要重新設計刀頭設計，我自定義html.but它並不顯示標籤，因爲我expect.It顯示HTML作爲string.Please看到小提琴.....工具提示不工作谷歌餅圖

 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>

來源

2016-03-11 Shin

添加選項「工具提示：{isHtml：真正}」太

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>

來源

2016-03-11 05:29:11 Bikee

我看不出我的問題和你的答案有什麼不同，都會產生相同的結果。 – Shin

對不起，請修改此行代碼： data.addColumn（{type：'string'，role：'tooltip'}）; 到 data.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）; – Bikee

您可以將HTML字符串DOM DOM元素通過Javascript 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); 
}

來源

2016-03-11 05:33:34

工具提示不工作谷歌餅圖

回答

相關問題