javascript - C3JS 条形图,带有颜色的特定顺序
问题描述
我目前正在研究 c3 图表以绘制堆栈条形图。我可以根据点击事件填充动态数据,它工作正常,但是当我查看图表时,显示在图表中的条形图没有根据我的输入正确定位
在这里我附上我的示例代码:
Rowvalue = [['1-10'].concat(processed_value_final0),
['11-50'].concat(processed_value_final1),
['51-200'].concat(processed_value_final2),
['201-500'].concat(processed_value_final3),
['501-1k'].concat(processed_value_final4)];
groupCol = ['1-10', '11-50', '51-200', '201-500', '501-1k'];
var chart = c3.generate({
bindto: div_id,
data: {
columns:Rowvalue,
type: 'bar',
order: 'asc',
groups: [
groupCol
]
},
bar: {
width: barwd
} ,
grid: {
y: {
show: true,
lines: [{value:0}]
}
},
axis: {
x:
{
type: 'category',
categories: keyValue
},
y:
{
min : 0,
padding : {
bottom : 0
}
}
},
color: {
pattern: ['#ED5565', '#23C6C8', '#F8AC59', '#1AB394', '#1C84C6', '#F8AC59', '#23C6C8', '#ED5565', '#F8AC59']
},
legend:
{
show: true,
position:'right'
},
tooltip :
{
show:true
}
});
解决方案
您需要更改order
配置部分中的值,它可以是 i)'asc'
或'desc'
- 对数据值起作用,即首先是最大值或最小值,ii)| null
对于与数据相同的(但不是,请参见下文)排序,或 iii)数据系列键的数组或 iv)对数据系列键进行操作的函数。
在这里,我们将 order 更改为数组 - groupCol 数组,但颠倒了:
order: groupCol.reverse(),
这会将顺序更改为与 groupCol 和 rowValue 变量中定义的顺序相反。需要反转的原因是因为堆栈绘制算法从下向上开始,而图例键从上到下列出数据系列键。这也是该null
选项不起作用的原因,条形图和图例将按顺序相互颠倒。
推荐阅读
- sql - 指定限制的 SQL 最大值
- javascript - 使用要显示的内容调整 HTML 表格,Angular
- outlook - Outlook REST API - 发送为
- java - Hibernate4 更新不起作用 - LocalSessionFactoryBean
- python - jinja2 - 遍历字典
- angularjs - Angular js中控制器之间的数据共享
- android - 找不到 com.android.tools.build:gradle:3.3.1
- javascript - OpenLayers:地图不使用非“标准”EPSG 代码渲染
- react-native - 如何仅使用 React Native 中的一个功能通过 onLayout 获得多个视图的尺寸?
- mysql - 我需要 SQL 表中的最后一条记录