如何解决Google时间轴图表的颜色会禁止一种特定的颜色,而将其他颜色设为“默认”的各种颜色
我在Google时间线图表上有一些指定为'CategoryB'的条形,我想对其进行着色,在这个示例中,我们将其设为黑色/#000。
对于所有其他颜色,我可以将它们设置为我选择的特殊颜色,但我不想指定-我希望为它们提供Google提供的默认随机颜色所以它们都有些不同。
是否可以为'CategoryA'指定'color:'default'或类似名称?我已经从this问题中编辑了一些代码-您会在底部看到两种颜色。
JavaScript:
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string',id: 'Group' });
dataTable.addColumn({ type: 'string',id: 'Category' });
dataTable.addColumn({ type: 'string',id: 'ID' });
dataTable.addColumn({ type: 'date',id: 'Start' });
dataTable.addColumn({ type: 'date',id: 'End' });
dataTable.addRows([
[ 'GROUP #1','CategoryA','C00001',new Date(2014,1),31) ],[ 'GROUP #1','C00002',1,28) ],'C00003',3,15) ],'CategoryB',21),2,19) ],'C00005',22),18) ],'C00004',[ 'GROUP #2',8),[ 'GROUP #3','C00006',5,[ 'GROUP #4','C00007',15),25) ]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
CategoryA: '#e63b6f',CategoryB: '#000',}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i,1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,},avoidOverlappingGridLines: true,height: chartHeight,width: '100%',colors: colors
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0,4]);
chart.draw(view,options);
}
google.load('visualization','1',{packages:['timeline'],callback: drawChart});
HTML:
<div id='example4.2'></div>
解决方法
首先,您所加载的Google图表的版本已被弃用。jsapi
负载将不再使用。
根据{{3}},从现在开始,我们应该使用以下gstatic
加载程序...
<script src="https://www.gstatic.com/charts/loader.js"></script>
这只会更改load
语句。
在这种情况下,建议使用...
google.charts.load('current',{packages: ['timeline'],callback: drawChart});
接下来,我们可以使用样式角色将颜色直接添加到数据表中。
我们可以删除当前用于确定颜色的类别列。
请注意:样式角色必须是第三列才能正常工作。
对于'CategoryB'
行,我们将颜色设置为黑色。
对于其余的行,我们使用null
作为颜色值。
然后,Google将根据需要为这些行使用默认颜色。
dataTable.addColumn({ type: 'string',id: 'Group' });
dataTable.addColumn({ type: 'string',id: 'ID' });
dataTable.addColumn({ type: 'string',role: 'style' }); // <-- style role
dataTable.addColumn({ type: 'date',id: 'Start' });
dataTable.addColumn({ type: 'date',id: 'End' });
dataTable.addRows([
[ 'GROUP #1','C00001',null,new Date(2014,1),31) ],[ 'GROUP #1','C00002',1,28) ],'C00003',3,15) ],'#000000',21),2,19) ],'C00005',22),18) ],'C00004',[ 'GROUP #2',8),[ 'GROUP #3','C00006',5,[ 'GROUP #4','C00007',15),25) ]
]);
请参阅以下工作摘要...
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string',id: 'Group' });
dataTable.addColumn({ type: 'string',id: 'ID' });
dataTable.addColumn({ type: 'string',role: 'style' });
dataTable.addColumn({ type: 'date',id: 'Start' });
dataTable.addColumn({ type: 'date',id: 'End' });
dataTable.addRows([
[ 'GROUP #1',25) ]
]);
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,},avoidOverlappingGridLines: true,height: chartHeight,width: '100%'
};
chart.draw(dataTable,options);
}
google.charts.load('current',callback: drawChart});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example4.2"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。