更改 C3.js 堆积条形图中单列的颜色

Question

我试图在 c3.js 堆叠条形图中突出显示一组值。在 this example 之后，我可以更改非堆叠条中单个条的颜色，但我无法弄清楚如何识别单个堆叠的索引。我的 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 为您提供堆栈的索引 - 但是，在您的示例中没有索引 4，因为索引从 0 开始，因此您可能有 [0,1,2,3]范围

所以根据索引和 return 测试一种新颜色，如果它匹配，如果不匹配，则 return 最初传入的 color。

（存在 d.index 测试，因为 color 函数被其他例程使用，这些例程仅传入一个字符串来指示数据集（"A"、"B"、 "C" 在您的示例中），因此您需要先测试 d 中是否存在您需要的字段。

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

更改 C3.js 堆积条形图中单列的颜色

Changing colors of single column in C3.js stacked bar chart

javascript

css

c3.js