如何click事件添加到角JS指令密谋海军报条形图 [英] how to add click event to angular js directive for plotting flot bar chart

问题描述

我是pretty新angularjs和海军报图。我想click事件添加到我的堆积条形图所以，一旦我点击它显示类别的信息堆栈，但我不知道如果我这样做是正确的。
请帮忙看看

I am pretty new to angularjs and flot charts. I am trying to add click events to my stacked bar charts so that once I click a stack it displays the categories information but I am not sure if am doing it right. Please help take a look

我已经绘制我图中angularjs指令

I already plot my chart in angularjs directive

请参见 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

                }
            });
        });

    }
};

}）;

推荐答案

既然你正在试图获得通过值对象的钥匙，你真的不能访问它用括号标记的数组。我以前可在这太问题找到一个函数： JavaScript对象按值<获取密钥/ A>

Since you're trying to get an object's Key by value, you can't really access it as an array using bracket notation. I used a function that can be found on this SO question: JavaScript object get key by value

然后，我只是改变了你的点击一部分这样的：

Then, I simply changed your click part to this:

elem.bind("plotclick", function (event, pos, item) {  
      if(item){
            scope.dis= getKeyByValue(item.series.xaxis.categories, item.dataIndex);
            scope.$apply();
      }
});

小提琴

这篇关于如何click事件添加到角JS指令密谋海军报条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！