我对 angularjs 和 flot 条形图还很陌生
我试图在基于过滤器的点击列表中显示过滤后的数据。
我已经创建了一个自定义指令来绘制图表和一个自定义过滤器，我使用它来处理通过点击方法获得的数据，但列表没有显示。
请帮忙看看
http://jsfiddle.net/6h1gL2sh/22/
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,
align: "center"
}
},
axisLabels: {
show: true
},
xaxis: {
axisLabel: 'Test Dates',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelPadding: 5,
mode: "categories",
tickLength: 0
},
yaxis: {
axisLabel: 'Pass/Fail Count',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: true
}
}
var data = scope[attrs.ngModel];
var getKeyByValue = function (obj, value) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (obj[prop] === value) return prop;
}
}
}
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
scope.plotdate = getKeyByValue(item.series.xaxis.categories, item.dataIndex);
switch (item.series.label) {
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 in items) {
if (items[i].start_date == date) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});
最佳答案
我终于修好了。我在我的 case 语句 block 中应用了 scope.$apply()。
我还在指定 Controller 的 div 之外的 div 中调用我的表达式
参见 js Fiddle http://jsfiddle.net/6h1gL2sh/24/
elem.bind("plotclick", function (event, pos, item) {
if (item) {
scope.show=false
scope.plotdate= getKeyByValue(item.series.xaxis.categories, item.dataIndex);
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)
});
}
}
关于javascript - 如何使用angularjs在 float 条形图点击事件上显示数据列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29609021/