c3图表顺序在Safari中不起作用答案

【问题标题】：c3 charts order not working in safaric3图表顺序在Safari中不起作用
【发布时间】：2017-11-09 22:57:03
【问题描述】：

堆叠条形图的 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']
        }
    }
});

【问题讨论】：

标签： css internet-explorer d3.js safari c3.js

【解决方案1】：

您的order 函数不正确：

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

根据the documentation

data.order

定义数据的顺序。

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

对于我在 Chrome 中将鼠标悬停在工具提示中的栏项目上时会不断切换位置。这是因为你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/

【讨论】：

我的要求不同，它不应该按数据的升序显示，数据的顺序不应该改变，即栏中的颜色顺序必须始终相同。例如：在给定的示例中，栏中的蓝色必须始终位于顶部，无论值是什么.....铬蓝色位于栏顶部，而野生动物园蓝色显示在底部酒吧
@SKRamesh 哦，现在我明白了您的问题，感谢您的澄清。我更新了我的答案和 jsfiddle，请检查。
我很乐意提供帮助！
嗨 Mikhail Shabrikov..我现在有一个问题，它在 safari 中运行良好，但在 chrome n Firefox 中只有第一个数据是有序的（即顶部颜色），其他颜色 r 不是有序的，栏中的颜色必须与图例的顺序相同。这是我的实际项目：jsfiddle.net/vtxexeb0（它在 safari 中完美，问题出在 chrome 中）。谢谢
是的，以前的解决方案并不通用，并且在我们只有两个数据项的情况下有效。我更新了答案，为你的实际项目检查这个小提琴 - jsfiddle.net/vtxexeb0/2