作者:蜀南竹海的天空 | 来源:互联网 | 2023-05-29 08:41
我正在使用c3js制作包含行数据的图表,并希望使用特定的颜色.
var chart = c3.generate({
data: {
x:'x',
rows: [
['x','Winter 2007-2008','Winter 2008-2009','Winter 2009-2010'],
['2013-01-01',12,30,3],
['2013-01-02',123,200,22],
['2013-01-03',21,100,54],
['2013-01-04',32,400,23],
['2013-01-05',12,150,12],
['2013-01-06',34,250,15]
],
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
这一切都很好,除了我希望将每一行设置为自定义颜色.
使用列数据,这很简单:
data: {
x:'x',
columns:[[]]
},
color: {
pattern: ['#1f77b4', '#aec7e8', '#ff7f0e']
}
这可以通过面向行的数据实现吗?
1> Chetan..:
尝试将颜色功能设置为图表,如下所示: -
color: function (color, d) {
// d will be 'id' when called for legends
var colors = { // Mapping for dataseries to color code.
'Winter 2007-2008': '#ff0000',
'Winter 2008-2009':'#00ff00',
'Winter 2009-2010':'#0000ff'
};
if(typeof d === 'object') {
return colors[d.id];
}else {
return colors[d];
}
//return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
}
工作示例: - jsFiddle