与谷歌饼图中的图例相比显示不同的切片文本

时间:2015-06-23 13:47:17

标签: charts google-visualization

我想在每个谷歌饼图切片上显示略微更改的文字。

在上面你会看到我们有传说

工作,吃饭,上下班,看电视,睡觉

我们在切片上有相同的文字

工作,吃饭,上下班,看电视,睡觉

我想要的是在每个切片上显示不同的文字 e.g。

每天工作,吃3次,每天上下班,每天看电视,每天睡觉

但传说文字应保持如上所述。

我没有选择使用jquery在图表外绘制图例。

任何帮助将不胜感激。

      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
            pieSliceText: 'label',
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="piechart" style="width: 900px; height: 500px;"></div>
   

1 个答案:

答案 0 :(得分:3)

删除pieSliceText(这是为了在分隔的切片中显示饼图,如果使用不正确则会产生奇怪的结果),然后添加一个定义工具提示的额外列:

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, 'work-daily'],
   ['Eat', 2, 'eat-3 times'],
   ['Commute', 2, 'commute-once a day'],
   ['Watch TV', 2, 'watch tv-daily'],
   ['Sleep', 7, 'sleep-daily']
]);

演示 - &gt;的 http://jsfiddle.net/y6e6bkdf/

绘制图表后,您可以按代码更改图例标题:

google.visualization.events.addListener(chart, 'ready', function() {
    var svg = document.getElementById('piechart').querySelector('svg'),
        legend = svg.querySelectorAll('g')[1].querySelectorAll('text');
    legend[0].textContent = 'work-daily';
    legend[1].textContent = 'eat-3 times';
    legend[2].textContent = 'commute-once a day';
    legend[3].textContent = 'watch tv-daily';
    legend[4].textContent = 'sleep-daily';
}); 

演示 - &gt;的 http://jsfiddle.net/w4weh1qy/

enter image description here

如果这个答案似乎不可思议或夸张,但很可惜我不知道任何其他方式改变一个饼图传说的标题对不起。