Question

我尝试为google饼图自定义工具提示，但我无法成功。反正有定制馅饼工具提示吗？我需要一个像这样的工具提示：Pie with tooltip

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p: {html:true}});
data.addRows([
['Woman',100,'Woman Number'],['Man',200,'Man Number'],['Couple',300,'Couple Number']         
]);
var options = {                  
                 'width':360,
                'height':200,   
                tooltip: {isHtml: true},                
                colors: ['#fda4b7', '#7eb9de', '#a5d454']
            };
            var chart = new     google.visualization.PieChart(document.getElementById('chartid'));     

            chart.draw(data, options);

Answer 1

最后，我找到了更改饼图的工具提示HTML的方法。

google.visualization.events.addListener(chart, 'onmouseover', function (e) { 
    // e.row contains the selected row number in the data table
    $(".google-visualization-tooltip").html("your html here");
});

Answer 2

也许这对你有用。我自己制作了一个饼图。它很轻，你可以自定义它：http://jsfiddle.net/cbWC4/5/

你创造了一个蛋糕：

//create the pieces of the pie (size, Name, color, relative size-will be calculatet later)
var p1= new Kuchenstueck(33,"Stueck1","949bc2",0); 
var p2= new Kuchenstueck(10,"Stueck2","5d5f6c",0); 
var p2= new Kuchenstueck(20,"Stueck3","96ccae",0); 

var kuchen = {kuchenstuecke: [p1,p2,p3], auffuellen:true, absoluteGroesse:0, mx:180, my:180, r:180, imgSizeX:360, imgSizeY:360};

并将其添加到html元素：

$(".torte").append(createKuchen(kuchen));

请注意：有些参数尚未实现，kuchen是馅饼的德语单词：）

饼图自定义工具提示

2 个答案: