不知何故,我无法为水平轴的文字着色。这就是我为选项设置的内容:
var options = {
colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
barLabelStyle: { fontSize: 9 } }
hAxis: {
textStyle:{color: '#FFF'}
}
};
截图:
完整代码:
var container = document.getElementById('timetracking_Dennis');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '#5700', 'Vernieuwing wifi-netwerk', new Date(0,0,0,10,16,0), new Date(0,0,0,10,17,0) ],
[ '#5704', 'Account Mike Hees', new Date(0,0,0,10,23,0), new Date(0,0,0,10,28,0) ],
[ '#5798', 'Laptop Bas van der Beer traag', new Date(0,0,0,10,15,0), new Date(0,0,0,11,14,0) ],
[ '#5832', 'Problemen iMac', new Date(0,0,0,11,24,0), new Date(0,0,0,11,25,0) ],
[ '#5832', 'Problemen iMac', new Date(0,0,0,11,34,0), new Date(0,0,0,11,35,0) ],
[ '#5856', 'Problemen iMac', new Date(0,0,0,17,28,0), new Date(0,0,0,18,0,0) ],
[ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,14,0), new Date(0,0,0,9,15,0) ],
[ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,0,0), new Date(0,0,0,10,0,0) ],
[ '#5856', 'Internet Broekhovenseweg', new Date(0,0,0,16,2,0), new Date(0,0,0,16,12,0) ],
[ '#5857', 'gebruiker Abdel issues met opstarten', new Date(0,0,0,11,37,0), new Date(0,0,0,11,38,0) ],
[ '#5895', 'Printer uit flexplek halen', new Date(0,0,0,11,9,0), new Date(0,0,0,11,17,0) ]
]);
var options = {
colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
barLabelStyle: { fontSize: 9 } }
};
chart.draw(dataTable, options);
答案 0 :(得分:1)
看起来你不能在时间轴图表上设置轴的样式......这很奇怪。
这有你所有的选择: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline
如果您与此图表选项进行比较,您可以看到它缺乏良好的轴支持:https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
您可以更改JS以支持您想要做的事情,但可能比其价值更麻烦。
您是否尝试通过css进行定位?可能是一个快速解决方案
答案 1 :(得分:1)
你可以使用非常脏的黑客来为X轴着色。
时间轴的svg包含许多<text>
个元素。这些包括X轴上的数字。
如果找到图表的<svg>
元素,并将其分配给名为svg
的变量,则可以执行以下操作:
svg.find('[font-size="13"]').attr('fill', '#ffffff');
假设您想要将X轴颜色设为白色。
这仅适用于您的特定情况,因为您更改了rowLabelStyle
。默认情况下,行标签也有font-size="13"
。