Question

我正在尝试使用nvD3多条形图来表示x-ticks上的字符串类型数据表示。集团条形图正确显示。但是堆积的条形图没有正确显示。相反，在其他人的顶部出现一个酒吧他们正在混淆（例如我的plunker中的示例GROUND）。任何人都可以帮我解决错误吗？

请找到我的plunker here

我的数据如下：

[{
    "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
    "key" : "FedEx"
}, {
    "values" : [["Ground", 117.8], ["NextDay", 0], ["2 Day", 0]],
    "key" : "UPS"
}]

Answer 1

键FedEx和UPS的值必须与类别2 day, NextDay & Ground中的值相同的序列

当你进入图表时，就像这样：

$scope.data = [{
    "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
    "key" : "FedEx"
}, {
    "values" : [["2 Day", 0], ["NextDay", 0], ["Ground", 117.8]],
    "key" : "UPS"
}]

希望有所帮助

Answer 2

以下排序有待应用于数据模型以解决外观问题。

function strcmp(a, b) {
    return a > b ? 1 : a < b ? -1 : 0;
}

function natcmp(a, b) {
    var x = [], y = [];

    a[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { x.push([$1 || 0, $2]) })
    b[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { y.push([$1 || 0, $2]) })

    while(x.length && y.length) {
        var xx = x.shift();
        var yy = y.shift();
        var nn = (yy[0]-xx[0]) || strcmp(yy[1],xx[1]);
        if(nn) return nn;
    }

    if(x.length) return -1;
    if(y.length) return +1;

    return 0;
}


$scope.data = $scope.data.map(function(d){ d.values = d.values.sort(natcmp); return d; });

参考：sorting json arrays in json array using angular js

带堆叠选项的nvd3多栏图表条形无法正常显示

2 个答案: