Question

我目前有一个时间轴图表，过滤器已经有效。我使用仪表板绑定这两个。

问题是我想让第一个泳道（或标签）的属性colorByRowLabel为true，但其余部分将默认为false。

我认为这对于大多数图表的选项中的系列属性是可行的，但此时我还没有在时间线图表中看到该可用性。

如果有人这样做或有解决方案，请发布一些示例代码，我将完成剩下的工作。如果我需要将代码放在这里，请告诉我，但我认为没有必要。

Answer 1

时间轴的data format不允许多个系列

提供自定义颜色的唯一方法是colors option

这意味着您需要提供所有颜色，
不只是第一个标签

colors选项采用一组颜色字符串
['#f44336', '#e91e63', '#9c27b0', ...

数组中的每种颜色都将分配给数据表中的一行

数组中的第一个颜色字符串将分配给第一行，依此类推......

然而，在绘图之前，图表将根据开始日期对数据进行排序所以必须以相同的顺序加载颜色
这可以通过手动排序数据来实现

请参阅以下工作代码段

相同的颜色用于第一个标签'special'，
其余的分配颜色......

＆＃13;

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      ['special', '_', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ],
      ['2', 'B', new Date(2012, 2, 4),  new Date(2013, 3, 30) ],
      ['special', '-', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['3', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ],
      ['4', 'D', new Date(2014, 2, 4),  new Date(2015, 2, 4) ],
      ['special', '=', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['5', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ],
      ['6', 'F', new Date(2016, 2, 4),  new Date(2017, 2, 4) ],
      ['special', '|', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['7', 'G', new Date(2017, 2, 4),  new Date(2018, 2, 4) ],
      ['8', 'H', new Date(2018, 2, 4),  new Date(2019, 2, 4) ],
      ['9', 'I', new Date(2019, 2, 4),  new Date(2020, 2, 4) ]
    ]);

    // sort by start date
    dataTable.sort([{column: 2}]);

    // build chart colors
    var colorPallette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'];
    var chartColors = [];
    var colorIndex = 0;
    var firstLabel = dataTable.getValue(0, 0);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) === firstLabel) {
        chartColors.push(colorPallette[0]);
      } else {
        chartColors.push(colorPallette[++colorIndex]);
      }
    }

    chart.draw(dataTable, {
      colors: chartColors,
      height: 600
    });
  },
  packages: ['timeline']
});

＆＃13;

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

＆＃13;

Google图表：根据时间线图表的标签应用不同的颜色样式类型

1 个答案: