颜色 google 时间线图表显示一种特定颜色，并使其他 'default' 各种颜色

Question

我在 google 时间线图表上有一些柱状图，它们被指定为 'CategoryB'，我想要彩色的，比如这个例子中的黑色/#000。

对于所有其他颜色，我可以让它们成为我选择的特定颜色，但我不想指定 - 我更希望为它们提供默认的随机颜色google 赋予它们的颜色，所以它们都有点不同。

有没有办法为 'CategoryA' 指定“颜色：'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, 0, 1), new Date(2014, 0, 31) ],
        [ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
        [ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
        [ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
        [ 'GROUP #1', 'CategoryB', 'C00005', new Date(2014, 0, 22),  new Date(2014, 2, 18) ],
        [ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
        [ 'GROUP #2', 'CategoryA', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
        [ 'GROUP #3', 'CategoryB', 'C00006', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
        [ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15),  new Date(2014, 1, 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, 2, 3, 4]);
    
    chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

Html:

<div id='example4.2'></div>

Answer 1

首先，您正在加载的 google 图表版本已被弃用。
不应再使用 jsapi 负载。
根据 release notes，从现在开始我们应该使用以下 gstatic 加载程序...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改 load 语句。
在这种情况下，建议使用...

google.charts.load('current', {packages: ['timeline'], callback: drawChart});

接下来我们可以使用style角色直接给数据添加颜色table.
我们可以删除当前用于确定颜色的类别列。

注意：样式角色必须是第三列才能正常工作。

对于 '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, 0, 1), new Date(2014, 0, 31) ],
    [ 'GROUP #1', 'C00002', null, new Date(2014, 1, 1), new Date(2014, 1, 28) ],
    [ 'GROUP #1', 'C00003', null, new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
    [ 'GROUP #1', 'C00003', '#000000', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
    [ 'GROUP #1', 'C00005', '#000000', new Date(2014, 0, 22),  new Date(2014, 2, 18) ],
    [ 'GROUP #1', 'C00004', null, new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
    [ 'GROUP #2', 'C00005', null, new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
    [ 'GROUP #3', 'C00006', '#000000', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
    [ 'GROUP #4', 'C00007', null, new Date(2014, 1, 15),  new Date(2014, 1, 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', 'C00001', null, new Date(2014, 0, 1), new Date(2014, 0, 31) ],
      [ 'GROUP #1', 'C00002', null, new Date(2014, 1, 1), new Date(2014, 1, 28) ],
      [ 'GROUP #1', 'C00003', null, new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
      [ 'GROUP #1', 'C00003', '#000000', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
      [ 'GROUP #1', 'C00005', '#000000', new Date(2014, 0, 22),  new Date(2014, 2, 18) ],
      [ 'GROUP #1', 'C00004', null, new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
      [ 'GROUP #2', 'C00005', null, new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
      [ 'GROUP #3', 'C00006', '#000000', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
      [ 'GROUP #4', 'C00007', null, new Date(2014, 1, 15),  new Date(2014, 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', {packages: ['timeline'], callback: drawChart});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example4.2"></div>

颜色 google 时间线图表显示一种特定颜色，并使其他 'default' 各种颜色

Color google timeline chart bars one particular color, and make others 'default' assorted colors

javascript

charts

timeline

colors

google-visualization