更改C3.js叠加条形图

时间:2016-09-03 08:28:54

标签: javascript css c3.js

我试图在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"通过将颜色更改为一组红色?

1 个答案:

答案 0 :(得分: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]作为可能的范围< / p>

因此,对索引进行测试并返回一个新颜色(如果匹配),如果它没有返回最初传入的color

d.index测试存在,因为color函数被其他例程传入,只传入表示数据集的字符串(示例中为“A”,“B”,“C”) ),所以你需要首先在d中测试你需要的字段是否存在。

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