flot x 轴刻度标签未与更改数据上的堆栈条形图对齐

Question

我正在处理点击按钮后重新绘制的堆叠条形图。

我使用类别插件在 x 轴上显示文本值

但是，当重新绘制条形图时，标签未按顺序排序。

var App = angular.module('App', []);

App.controller('Ctrl', function ($scope) {
    var data2 = [{
        "label": "Passed",
            "color": "#27c24c",
            "data": [
            ["Apr 01 2015", 21],
            ["Apr 02 2015", 20],
            ["Apr 06 2015", 23],
            ["Apr 07 2015", 55]
        ]
    }, {
        "label": "Failed",
            "color": "#FFA500",
            "data": [
            ["Apr 01 2015", 21],
            ["Apr 02 2015", 2],
            ["Apr 06 2015", 10],
            ["Apr 07 2015", 27]
        ]
    }]

    var data1 = [{
        "label": "Passed",
            "color": "#27c24c",
            "data": [
            ["Apr 06 2015", 23],
            ["Apr 07 2015", 55],
            ]
    }, {
        "label": "Failed",
            "color": "#FFA500",
            "data": [
            ["Apr 06 2015", 10],
            ["Apr 07 2015", 27],
            ]
    }];

    var arr1 = {
        "passdetails": [{
            "test_id": 6,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 06 2015",
                "test_name": "Check Calculate and Compare Deal Percentage",
                "totalpasses": 3,
                "time_taken": 32767,
                "browser_used": "chrome"
        }, {
            "test_id": 6,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 07 2015",
                "test_name": "Check Calculate and Compare Deal Percentage",
                "totalpasses": 8,
                "time_taken": 32767,
                "browser_used": "chrome"
        }],
            "faildetails": [{
            "test_id": 3,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 06 2015",
                "test_name": "Click Deal Buy Now Button and validate Cart",
                "totalfails": 2,
                "time_taken": 32767,
                "browser_used": "chrome"
        }, {
            "test_id": 3,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 07 2015",
                "test_name": "Click Deal Buy Now Button and validate Cart",
                "totalfails": 9,
                "time_taken": 32767,
                "browser_used": "chrome"
        }]
    }
    var arr2 = {
        "passdetails": [{
            "test_id": 3,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 01 2015",
                "test_name": "Check Calculate and Compare Deal Percentage",
                "totalpasses": 3,
                "time_taken": 32767,
                "browser_used": "chrome"
        }, {
            "test_id": 1,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 02 2015",
                "test_name": "Check Calculate and Compare Deal Percentage",
                "totalpasses": 8,
                "time_taken": 32767,
                "browser_used": "chrome"
        }],
            "faildetails": [{
            "test_id": 4,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 01 2015",
                "test_name": "Click Deal Buy Now Button and validate Cart",
                "totalfails": 2,
                "time_taken": 32767,
                "browser_used": "chrome"
        }, {
            "test_id": 10,
                "product": "Magento",
                "suite_id": "3",
                "suite_name": "Feature Tests",
                "start_date": "Apr 02 2015",
                "test_name": "Click Deal Buy Now Button and validate Cart",
                "totalfails": 9,
                "time_taken": 32767,
                "browser_used": "chrome"
        }]
    }
    $scope.data = data1

    $scope.details = []
    $scope.plotdate = null

    $scope.arr = arr1;
    $scope.redraw = function () {
        $scope.data = data2
        $scope.arr = arr2;
    }
});

App.directive('chart', function () {
    return {
        restrict: 'EA',
        link: function (scope, elem, attrs) {
            var chart = null,
                options = {
                    series: {
                        stack: true,
                        bars: {
                            show: true,
                            clickable: true,
                            barWidth: 0.1
                        }
                    },
                    axisLabels: {
                        show: true
                    },
                    xaxis: {
                        mode: "categories",
                        tickLength: 0
                    },
                    yaxis: {
                        axisLabel: 'Pass/Fail Count',
                        axisLabelUseCanvas: false,
                        axisLabelFontSizePixels: 12,
                        axisLabelPadding: 5
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    }
                }
            var data = scope[attrs.ngModel];

            var getKeyByValue = function (obj, value) {
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        if (obj[i] === value) return i;
                    }
                }
            }

            scope.$watch(attrs.ngModel, function (v) {
                if (!chart) {
                    chart = $.plot(elem, v, options);
                    elem.show();
                } else {
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
            elem.bind("plotclick", function (event, pos, item) {
                if (item) {
                    scope.show = false
                    console.log('ticks= ', item.series.xaxis.ticks)
                    console.log('Categories= ', item.series.xaxis.categories)
                    scope.plotdate = item.series.xaxis.ticks[item.dataIndex].label
                    scope.stats = item.series.label
                    switch (scope.stats) {
                        case 'Passed':
                            scope.details = scope.arr.passdetails;
                            break;
                        case 'Failed':
                            scope.details = scope.arr.faildetails;
                            break;

                    }
                }
                scope.$apply();
                console.log('details= ', scope.details)
                console.log('Plotdate= ', scope.plotdate)
                console.log('Show= ', scope.show)

            });

        }
    }

});
App.filter('getdata', function () {

    return function (items, date) {

        var arrayToReturn = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].start_date == date) {
                arrayToReturn.push(items[i]);
            }
        }

        return arrayToReturn;
    };
});

Answer 1

显然 chart.setupGrid() 方法不会重新计算类别标签。有两种方法可以解决此问题：

1) 在绘图选项中定义类别（参见此 fiddle）：

xaxis: {
    mode: "categories",
    categories: ["Apr 01 2015","Apr 02 2015","Apr 06 2015","Apr 07 2015"],
    tickLength: 0
},

2) 每次更改数据时创建一个新图（参见此 fiddle）：

scope.$watch(attrs.ngModel, function (v) {
    chart = $.plot(elem, v, options);
    elem.show();
});

Answer 2

类别插件中有一行不允许重新创建类别数组。 https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js

中的第 124 行

if (!series[axis].categories) {-----}

我注释掉了 if 条件，现在每次图表数据更改时类别标签都会重新计算:)

见fiddle http://jsfiddle.net/mxvhp9uo/8/

flot x 轴刻度标签未与更改数据上的堆栈条形图对齐

flot x axis tick labels not aligned to stack bar chart on Change Data

javascript

angularjs

flot