我正在处理单击按钮时重绘的堆积条形图。
我使用类别插件在x轴上显示文本值
但是，重绘条形图时，标签不会按顺序排序。
http://jsfiddle.net/mxvhp9uo/5/
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;
};
});
答案 0 :(得分：1)
类别插件中有一行不允许重新创建类别数组。 https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js
中的第124行if (!series[axis].categories) {-----}
我注释了if条件，现在每次图表数据发生变化时类别标签都会重新计算：）
答案 1 :(得分：0)
显然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();
});