【问题标题】: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 的德语单词 :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多