![](/img/trans.png)
[英]C3.js horizontal bar chart - Highlight a specific x-axis tick together with bar
[英]How to make inverted bar chart on the x-axis in c3.js
我能够用c3.js实现
这是我的c3.js代码。
var chart = c3
.generate({
bindto : "#topUses",
size : {
height : 180,
width : 400
},
bar : {
width : 14
},
padding : {
left : 100,
top : 50
},
color : {
pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919',
'#ff1919' ]
},
data : {
x : 'x',
columns : [
[ 'x', 'Google', 'Yahoo', 'Facebook',
'Capital One', 'Express' ],
[ 'value', 160, 310, 232, 405, 200 ] ],
type : 'bar',
color : function(inColor, data) {
var colors = [ '#ff1919', '#ff1919', '#ff1919',
'#ff1919', '#ff1919' ];
if (data.index !== undefined) {
return colors[data.index];
}
return inColor;
}
},
axis : {
rotated : true,
x : {
type : 'category',
show : false,
},
y : {
show : false
}
},
tooltip : {
grouped : false
},
legend : {
show : false
}
});
我想实现这一目标,有什么想法吗?
您可以使用css transform镜像包含条的组,并使用transform-origin将其保留在svg中:
var chart = c3 .generate({ bindto : "#topUses", size : { height : 180, width : 400 }, bar : { width : 14 }, padding : { left : 100, top : 50 }, color : { pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919', '#ff1919' ] }, data : { x : 'x', columns : [ [ 'x', 'Google', 'Yahoo', 'Facebook', 'Capital One', 'Express' ], [ 'value', 160, 310, 232, 405, 200 ] ], type : 'bar', color : function(inColor, data) { var colors = [ '#ff1919', '#ff1919', '#ff1919', '#ff1919', '#ff1919' ]; if (data.index !== undefined) { return colors[data.index]; } return inColor; } }, axis : { rotated : true, x : { type : 'category', show : false, }, y : { show : false } }, tooltip : { grouped : false }, legend : { show : false } });
.c3-chart{ transform-origin: 120px 0px; transform:scale(-1,1); }
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <div id="topUses"></div>
另一个棘手的方法是将值['value',-160,-310,-232,-405,-200]反转,然后必须在图例中找到要删除“-”的内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.