C3js 行数据,自定义颜色
C3js row data, custom colors
我正在使用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']
}
这可以通过面向行的数据来实现吗?
尝试为图表设置颜色功能,如下所示:-
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;
}
工作示例:- js小提琴
颜色模式应该有效:
color: {pattern: ['#ff0000','#00ff00','#0000ff']},
小提琴。
相关文章:
- 在自定义坐标处获取RaphaelJS元素的颜色填充
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色
- 设计颜色自定义程序
- JQPLOT 根据标签名称为饼图设置自定义颜色
- 如何在 gmap v3 中对图标使用自定义颜色
- JustGage 中的自定义颜色无法正常工作
- C3js 行数据,自定义颜色
- 如何流畅地制作动画、自定义颜色和控制 jQuery UI 进度条
- CKeditor-自定义颜色
- 检查用户是否在浏览器中设置了自定义颜色
- 导航栏/菜单未使用Safari以自定义颜色显示(其他浏览器中的正确颜色)
- 有没有办法在HTML 5中自定义颜色选择器?
- 创建自定义颜色集TinyMCE
- 自定义颜色选择器TinyMCE
- 如何在vis.js中为堆叠条形图定义自定义颜色?
- 将自定义颜色添加到w2ui单元格[网格]
- HighCharts:如何将自定义颜色与渐变相结合
- 拉斐尔演示饼图调整添加自定义颜色
- ExtJS 4菜单颜色选择器中的自定义颜色(Ext.menu.ColorPicker)