饼图自定义工具提示答案

【问题标题】：Pie chart custom tooltip饼图自定义工具提示
【发布时间】：2013-12-13 07:12:55
【问题描述】：

我尝试为谷歌饼图自定义工具提示，但我无法成功。无论如何要自定义饼图工具提示吗？我需要这样的工具提示：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);

【问题讨论】：

标签： charts tooltip pie-chart

【解决方案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");
});

【讨论】：

这对我不起作用，我没有看到任何此类添加到工具提示中

【解决方案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 是 pie 的德语单词 :)

【讨论】：