[英]Changing colors of single column in C3.js stacked bar chart
I am trying to highlight a single set of values in a c3.js stacked bar chart. 我试图在c3.js堆积的条形图中突出显示一组值。 Following this example I can change the color of a single bar in a non-stacked bar, but I can't figure out how to identify the indexes of a single stack.
在此示例之后,我可以更改非堆叠条形图中单个条形的颜色,但无法弄清楚如何识别单个堆叠的索引。 My JS is:
我的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'
}
}
});
And the approach of the example is to do: 该示例的方法是:
color: function (color, f) {
return f.index === 4 ? "#dd0" : "#ddd";
}
Work in progress JSFIDDLE . 正在进行中的JSFIDDLE 。 How can I get the indexes of the 3 values of a single stack and then use them to change their colors?
如何获取单个堆栈的3个值的索引,然后使用它们更改其颜色? For example, if I want to highlight "2ND" by changing the colours to a set of reds?
例如,如果我想通过将颜色更改为一组红色来突出显示“ 2ND”?
Adapted from the example here --> http://c3js.org/samples/data_color.html 从此处的示例改编-> http://c3js.org/samples/data_color.html
color : function (color, d) {
return d.index && d.index === 2 ? "#dd0" : color;
},
https://jsfiddle.net/kmjpg30c/3/ https://jsfiddle.net/kmjpg30c/3/
d.index
gives you the index of the stack - however, in your example there is no index 4 as the indexing starts at 0, so you have [0,1,2,3] as a possible range d.index
为您提供堆栈的索引-但是,在您的示例中,由于索引从0开始,所以没有索引4,因此您有[0,1,2,3]作为可能的范围
So test against the index and return a new color if it matches and if it doesn't return the color
that is originally passed in. 因此,请针对索引进行测试,并在匹配时返回新颜色,如果不返回原先传入的
color
,则返回新color
。
(the d.index
test is present as the color
function gets used by other routines that pass in just a string indicating the dataset ("A", "B", "C" in your example), so you need to test for the existence of the fields you need in d
first. (当
color
函数被其他例程使用时, d.index
测试就出现了,这些例程仅传入指示数据集的字符串(示例中为“ A”,“ B”,“ C”),因此您需要测试首先存在d
需要的字段。
if you want to highlight just one part of the stack use the .id
field as well eg d.index === 2 && d.id === "A"
如果只想突出显示堆栈的一部分,也可以使用
.id
字段,例如d.index === 2 && d.id === "A"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.