我对 angularjs 和 float 图表还很陌生。我正在尝试将单击事件添加到堆积条形图中,以便一旦单击堆栈,它就会显示类别信息,但我不确定是否做得正确。 请帮忙看一下
我已经在 angularjs 指令中绘制了图表
参见http://jsfiddle.net/6h1gL2sh/10/这里
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: 'Products',
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];
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) {
scope.$apply(function () {
if (item) {
scope.dis = item.series.xaxis.categories[item.dataIndex].label
}
});
});
}
};
});
最佳答案
由于您尝试按值获取对象的 Key,因此您无法真正使用括号表示法将其作为数组访问。我使用了一个可以在这个问题上找到的函数:JavaScript object get key by value
然后,我只是将您的点击部分更改为:
elem.bind("plotclick", function (event, pos, item) {
if(item){
scope.dis= getKeyByValue(item.series.xaxis.categories, item.dataIndex);
scope.$apply();
}
});
关于javascript - 如何将点击事件添加到 Angular js指令以绘制flot条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29587038/