C3.js 绘制 xy 图表，点之间的线连接不正确

Question

C3.js 绘制 xy 图表时出现问题。任何帮助将不胜感激。

var T = [];
var F = [];
var n = [];

T.push('T');
F.push('F');

d3.csv("/abc.csv", function(d) {
            {
                True_SJs.push(d[" T"]);
                False_SJs.push(d[" F"]);

            },
            function(error, rows) {
                var chart = c3.generate({
                    bindto: '#roc',
                    data: {
                        x: 'F',
                        columns: [
                            F,
                            T
                        ],
                        order: 'asc',
                        selection: {
                            grouped: true
                        }
                    },
                    zoom: {
                        enabled: true,
                        rescale: true,
                        extent: [1, 10]
                    },
                    tooltip: {
                        format: {
                            title: function(x) {
                                return 'F' + x;
                            }
                        }
                    },
                    grid: {
                        x: {
                            show: true
                        },
                        y: {
                            show: true
                        }
                    }
                });
            });

预期输出应该是从点 4 的顶部开始并连接下一个点的线。这是示例 http://c3js.org/samples/simple_xy.html

的 link

Answer 1

这是因为您的数据具有重复的 x 值，并且相应的 y 值先升后降。像

 F => ['F', .... 4, 4, 4, ...];
 T => ['T', .... 21, 23, 22, ...];

如果你希望直线是连续的，你可以在F(X)值相等时对T值进行排序。像

// construct an array of arrays - each element contains the T values for an F value
var groupedT = [];
T.forEach(function (e, i) {
    // skip element 0 (the label)
    if (i) {
        groupedT[T[i]] = groupedT[T[i]] || [];
        groupedT[T[i]].push(e);
    }
})
// flattening array of arrays
T = groupedT.reduce(function (a, b) {
    return a.concat(b.sort());
}, ['T']);

在您生成图表之前，我们将为您提供所需的信息。

C3.js 绘制 xy 图表，点之间的线连接不正确

C3.js plotting xy chart, line not getting connected properly between points

javascript

jquery

charts

graph

c3.js