【发布时间】:2013-10-25 08:03:11
【问题描述】:
是否可以在谷歌饼图中以不同颜色显示每个图例?我的饼图中有 3 个图例,我想用不同的颜色显示每个图例。
【问题讨论】:
-
您不能用不同的颜色为各个图例条目的文本着色。
是否可以在谷歌饼图中以不同颜色显示每个图例?我的饼图中有 3 个图例,我想用不同的颜色显示每个图例。
【问题讨论】:
是的,来自google instructions:
使用legend.textStyle 选项并像这样分配它
Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
指定图例文本样式的对象。该对象具有以下格式:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
颜色可以是任何 HTML 颜色字符串,例如:'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。
所以对于drawchart中的每个pi图
function drawChart() {//chart 1
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 1',
pieSliceText: 'label',
legend.textStyle: { color: 'blue', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
function drawChart() {//chart 2
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 2',
pieSliceText: 'label',
legend.textStyle: { color: 'red', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
} function drawChart() {//chart 3
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 3',
pieSliceText: 'label',
legend.textStyle: { color: 'green', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart3'));
chart.draw(data, options);
}
【讨论】: