C3JS 条形图，带有颜色的特定顺序答案

【问题标题】：C3JS bar chart with specific order with colorC3JS 条形图，带有颜色的特定顺序
【发布时间】：2019-04-15 05:54:21
【问题描述】：

我目前正在使用 c3 图表来绘制 Stack 条形图。我可以根据点击事件填充动态数据，它工作正常，但是当我查看图表时，显示在图表中的条形图根据我的输入没有正确定位

这里附上我的示例代码：

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
    }
   });

【问题讨论】：

标签： javascript positioning c3.js

【解决方案1】：

您需要更改配置的order 部分中的值，它可以是 i) 'asc' 或 'desc' - 它们首先处理数据值，即最大或最小值，ii)| null 用于与数据相同的（但不是，见后文）排序，或 iii) 数据系列键的数组或 iv) 对数据系列键进行操作的函数。

这里我们将 order 更改为数组 - groupCol 数组，但颠倒了：

    order: groupCol.reverse(),

这会将顺序更改为与 groupCol 和 rowValue 变量中定义的顺序相反。之所以需要颠倒是因为堆栈绘制算法是从下往上开始的，而图例键是从上到下列出数据系列键的。这也是为什么null 选项不起作用的原因，条形图和图例将按顺序相互颠倒。

【讨论】：