我一直在尝试为Google条形图添加注释。我已经看到了相关问题,但无法解决。图表中有2个条形图,我想在条形图上显示数字。我在我的数据表中添加了2个注释列。图表绘制工作没有注释,控制台没有错误。所以我需要一些帮助。这是我的代码:
git rebase master new/master -X theirs
提前感谢。
答案 0 :(得分:0)
参见 - > Tracking Issue for Material Chart Feature Parity #2143
以下选项将设置 Core 图表的样式,类似于材料 ......
annotations.*
注意:注释列应该直接跟在它所代表的系列之后......
请参阅以下工作代码段...
theme: 'material'
google.charts.load('current', {
callback: function () {
var options = {
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
chartArea: {
left: 36,
width: '100%'
},
colors: ['#17807E', '#4285F4'],
focusTarget:'category',
height:300,
legend: {
position: 'bottom'
},
theme: 'material',
title: 'xxxx',
vAxis: {
format: 'short',
viewWindow: {
max: 12
}
},
};
drawAudits();
window.addEventListener('resize', drawAudits, false);
function drawAudits(Data) {
var dataTbl = new google.visualization.DataTable();
dataTbl.addColumn('string', 'Months');
dataTbl.addColumn('number', 'Scheduled');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
dataTbl.addColumn('number', 'Done');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
Data = [
{month: 'Jan', AllAudits: 10, DoneAudits: 5},
{month: 'Feb', AllAudits: 10, DoneAudits: 6}
];
for (var i = 0; i < Data.length; i++) {
dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].AllAudits, Data[i].DoneAudits, Data[i].DoneAudits]);
}
var chart = new google.visualization.ColumnChart(document.getElementById('columnChartDiv'));
chart.draw(dataTbl,options);
}
},
packages: ['corechart']
});