Google时间轴图表的颜色会禁止一种特定的颜色，而将其他颜色设为“默认”的各种颜色

编程问答 2022-08-11

问题描述

我在Google时间线图表上有一些指定为'CategoryB'的条形，我想对其进行着色，在这个示例中，我们将其设为黑色/＃000。

对于所有其他颜色，我可以将它们设置为我选择的特殊颜色，但我不想指定-我希望为它们提供Google提供的默认随机颜色所以它们都有些不同。

是否可以为'CategoryA'指定'color：'default'或类似名称？我已经从this问题中编辑了一些代码-您会在底部看到两种颜色。

jsfiddle

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>

chartscolorsgoogle-visualizationjavascripttimeline