谷歌图表时间线:问题与着色&条形标签

Google Charts Timeline: Issue with coloring & bar labels

本文关键字：amp 标签 时间线 问题 谷歌      更新时间：2023-09-26

我有一个时间表。当我的时间线中只有3列（行标签、开始日期、结束日期）并为其上色时，一切都很完美。然而，我在时间线上添加了另一列（条形标签），现在颜色都乱了。有人知道如何解决这个问题吗？如果不是，这个问题会被认为是一个bug吗。

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

查看我的硬编码颜色阵列：

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

除倒数第三个小节外的所有小节都应为橙色。倒数第三条应为灰色。如图所示，当按下run按钮时，所有的条形图都是橙色的。

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

设置timeline.colorByRowLabel使用colors阵列的行标签/位置

timeline: {
  colorByRowLabel: true
}

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

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

请参阅以下工作片段。。。

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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<p id="demo"></p>
<div id="timeline" style="height: 240px;"></div>

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

相关文章：