Question

堆积条形图的C3图表订单功能在Chrome和Firefox中有效，但在safari和IE中，条形图中的数据顺序相反。这是演示

<div id="chart"></div>

var chart = c3.generate({
    data: {
        columns: [
            ['MONETARY', 11340, 3259],
            ['NON-MONETARY', 12335, 18041]
        ],
        type: 'bar',
        groups: [
            ['MONETARY','NON-MONETARY']
        ],
         order:function(t1,t2){return true},
    },

    axis: {
        x: {
            type: 'category',
            categories: ['DENTIST', 'PROGRAMMER/ANALYST']
        }
    }
});

Answer 1

您的order功能不正确：

order:function(t1,t2){ return true }

根据the documentation

data.order

定义数据的顺序。

此选项更改堆叠数据和部分的顺序   馅饼/甜甜圈。如果指定null，则它将是加载数据的顺序。如果   指定的函数，它将用于对数据进行排序   收到数据作为论据。

对于我来说，当我将鼠标悬停在工具提示中的条形项目上时会持续切换位置。因为你order函数总是返回true。如果你想将蓝色矩形（Monetary）放在橙色矩形（Non monetary）上，你可以这样简单地重写order属性：

order: function(v1, v2) {
  return dataOrder.indexOf(v1.id) < dataOrder.indexOf(v2.id) ? 1 : -1
}

dataOrder为var dataOrder = ['MONETARY', 'NON-MONETARY'];

的位置

在Safari和IE中查看你的小提琴分叉 - https://jsfiddle.net/y0qLnvv4/6/

c3图表订单不适用于safari

1 个答案: