Question

我有一张时间表图表。当我的时间轴中只有3列（行标签，开始日期，结束日期）并为其着色时，一切都很完美。但是，我在我的时间轴上添加了另一个列（条形标签），现在着色全部搞砸了。有谁知道如何解决这个问题？如果不是，那么这个问题是否会被视为错误。

jsfiddle上的示例代码段演示了此问题： https://jsfiddle.net/9egybsro/

查看我的硬编码颜色数组：

var color = ['#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#FF9900',
            '#868686',
            '#FF9900',
            '#FF9900'
          ]

除第3个到最后一个条形以外的所有条形应为橙色。第3个到最后一个条应该是灰色的。如图所示，当按下运行按钮时，所有条都显示为橙色。

Answer 1

默认情况下，colors会跟随条形码标签

设置timeline.colorByRowLabel以使用colors数组

的行标签/位置

timeline: {
  colorByRowLabel: true
}

否则，请使用不同的条形标签......

var barLabel = [];
for (var i = 0; i < startDate.length; ++i) {
  barLabel.push("potato" + i);
}

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById("timeline");
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'account_name'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'bar_label'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });

  var name = ['Russ Hanneman',
    'Gavin Belson',
    'Jack Barker',
    'Peter Gregory',
    'Jian Yang',
    'Richard Hendrix',
    'Dinesh Chugtai',
    'Bertram Gilfoyle',
    'Erlich Bachman',
    'Monica Hall',
    'Nelson Bighetti',
    'Aaron Anderson',
    'Donald \'OJ\' Dunn'
  ]

  var startDate = [new Date(2016, 0, 2),
    new Date(2015, 5, 1),
    new Date(2015, 11, 31),
    new Date(2014, 0, 1),
    new Date(2016, 6, 16),
    new Date(2016, 9, 12),
    new Date(2017, 5, 20),
    new Date(2019, 0, 1),
    new Date(2015, 0, 1),
    new Date(2016, 9, 21),
    new Date(2015, 8, 1),
    new Date(2017, 6, 4),
    new Date(2015, 6, 17)
  ]

  var endDate = [new Date(2025, 6, 25),
    new Date(2016, 11, 17),
    new Date(2016, 2, 4),
    new Date(2018, 6, 16),
    new Date(2017, 11, 25),
    new Date(2020, 2, 3),
    new Date(2019, 6, 13),
    new Date(2019, 9, 16),
    new Date(2018, 9, 23),
    new Date(2019, 7, 12),
    new Date(2019, 2, 17),
    new Date(2022, 3, 1),
    new Date(2021, 0, 21)
  ]

  var barLabel = [];
  for (var i = 0; i < startDate.length; ++i) {
    barLabel.push("potato");
  }

  var color = ['#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#FF9900',
    '#868686',
    '#FF9900',
    '#FF9900'
  ]

  heightVal = 50 * name.length;
  if (heightVal > 500) {
    heightVal = 500;
  }

  document.getElementById("timeline").style = "height: " + heightVal.toString() + "px;";

  var accounts = [];

  for (i = 0; i < endDate.length; i++) {
    accounts.push([name[i], barLabel[i], startDate[i], endDate[i]]);
  }

  var options = {
    colors: color,
    timeline: {
      colorByRowLabel: true
    }
  };

  dataTable.addRows(accounts);

  chart.draw(dataTable, options);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<p id="demo"></p>
<div id="timeline" style="height: 240px;"></div>

＆＃13;

Answer 2

解决了它。 colorByRowLabel需要设置为true。我相信条形标签的值将用作着色的度量标准，如果它设置为false而不是相对于颜色数组的该行的索引。

Google Charts时间表：着色问题＆amp;酒吧标签

2 个答案: