更改C3.js堆疊條形圖中的單列顏色

Question

我試圖在c3.js堆積的條形圖中突出顯示一組值。 在此示例之后，我可以更改非堆疊條形圖中單個條形的顏色，但無法弄清楚如何識別單個堆疊的索引。 我的JS是：

var chart = c3.generate({
  bindto: '#chart1',
  data: {
    x: 'x',
    columns: [
      ['x', "1ST", "2ND", "3RD", "4TH"],
      ['A', 6, 8, 2, 9],
      ['B', 3, 4, 1, 6],
      ['C', 4, 4, 2, 4]

    ],
    type: 'bar',
    groups: [
      ['A', 'B', 'C']
    ],
    colors: {
      A: '#666666',
      B: '#cccccc',
      C: '#428bca',
    },
    order: 'asc'
  },
  axis: {
    x: {
      type: 'category'
    }
  }
});

該示例的方法是：

color: function (color, f) {
   return f.index === 4 ? "#dd0" : "#ddd";
}

正在進行中的JSFIDDLE 。 如何獲取單個堆棧的3個值的索引，然后使用它們更改其顏色？ 例如，如果我想通過將顏色更改為一組紅色來突出顯示“ 2ND”？

Answer 1

從此處的示例改編-> http://c3js.org/samples/data_color.html

    color : function (color, d) {
        return d.index && d.index === 2 ? "#dd0" : color;
    },

https://jsfiddle.net/kmjpg30c/3/

d.index為您提供堆棧的索引-但是，在您的示例中，由於索引從0開始，所以沒有索引4，因此您有[0,1,2,3]作為可能的范圍

因此，請針對索引進行測試，並在匹配時返回新顏色，如果不返回原先傳入的color ，則返回新color 。

（當color函數被其他例程使用時， d.index測試就出現了，這些例程僅傳入指示數據集的字符串（示例中為“ A”，“ B”，“ C”），因此您需要測試首先存在d需要的字段。

如果只想突出顯示堆棧的一部分，也可以使用.id字段，例如d.index === 2 && d.id === "A"