我想在每个谷歌饼图切片上显示略微更改的文字。
在上面你会看到我们有传说
工作,吃饭,上下班,看电视,睡觉
我们在切片上有相同的文字
工作,吃饭,上下班,看电视,睡觉
我想要的是在每个切片上显示不同的文字 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>
答案 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/ 强>
如果这个答案似乎不可思议或夸张,但很可惜我不知道任何其他方式改变一个饼图传说的标题对不起。