谷歌圖表 - 在工具提示中顯示的HTML源代碼

我試圖使用Google圖表在工具提示中使用HTML來顯示餅圖。
我得到的問題是HTML源顯示。我在數據列上設置了html：true，我在選項中設置了tooltip.isHtml，我真的不知道還有什麼可以嘗試的！這裏是我的JS來源：谷歌圖表 - 在工具提示中顯示的HTML源代碼

google.setOnLoadCallback(drawChart_1); 
function drawChart_1() { 
    var data = google.visualization.arrayToDataTable([ 
['','',''], 
['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ], 
['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ], 
['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ], 
['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ], 
]); 
data.setColumnProperty(2,'role','tooltip'); 
data.setColumnProperty(2,'html','true'); 
data.setColumnProperty(2,'p',{'html':true}); // tried with, and without this (and the next) line 
//data.setColumnProperty(2,'properties',{'html':true}); 

    var options = {"height":300,"pieSliceText":"none","tooltip.isHtml":true,"pieHole":0.5,"legend":"none","pieSliceTextStyle":"none","chartArea":{"width":"100%","height":"80%"},"slices":[{"color":"#959595"},{"color":"#616161"},{"color":"#005131"},{"color":"#e2e2e2"}]}; 
    var chart = new google.visualization.PieChart(document.getElementById('piechart_div_1')); 
    chart.draw(data , options); 
}

因此，沒有人知道我對這個問題呢？搜索這個問題只是指向將tooltip.isHtml設置爲true的方向，這我已經完成了。一些結果指出我在數據列上設置html：true的方向 - 在代碼中，您可以看到一些嘗試，但沒有任何影響。

來源

2016-08-04 jad

夫婦的事情...

第一，可以提供列定義數組

var data = google.visualization.arrayToDataTable([ 
    ['' , '' , {type:"string" , role:"tooltip" , p:{"html":true}}], 
    ... 
]);

，肯定需要p:{"html":true}

在旁邊，在options，tooltip應該是一個對象帶鑰匙

"tooltip": { 
    "isHtml":true 
    },

個與

"tooltip.isHtml":true

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['','',{type:"string",role:"tooltip",p:{"html":true}}], 
 
     ['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ], 
 
     ['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ], 
 
     ['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ], 
 
     ['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ], 
 
    ]); 
 

 
    var options = { 
 
     "height":300, 
 
     "pieSliceText":"none", 
 
     "tooltip": { 
 
     "isHtml":true 
 
     }, 
 
     "pieHole":0.5, 
 
     "legend":"none", 
 
     "pieSliceTextStyle":"none", 
 
     "chartArea":{ 
 
     "width":"100%", 
 
     "height":"80%" 
 
     }, 
 
     "slices":[ 
 
     {"color":"#959595"}, 
 
     {"color":"#616161"}, 
 
     {"color":"#005131"}, 
 
     {"color":"#e2e2e2"} 
 
     ] 
 
    }; 
 
    var chart = new google.visualization.PieChart(document.getElementById('piechart_div_1')); 
 
    chart.draw(data , options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="piechart_div_1"></div>

來源

2016-08-04 14:02:10 WhiteHat

感謝的是，該代碼工作得很好，並指出我在我isHtml被誤方向建。由於某種原因，我發現p：{「html」：true}在我的代碼中實際上並不需要。 – jad

谷歌圖表 - 在工具提示中顯示的HTML源代碼

回答

相關問題