如何将click事件添加到angular js指令中以绘制浮点条形图

debugcn 发表于 Dev

那

我对angularjs和flot图表很陌生。我试图将点击事件添加到堆叠的条形图中，以便一旦单击堆叠便显示类别信息，但不确定是否正确。请帮忙看看

我已经在angularjs指令中绘制了图表

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

                }
            });
        });

    }
};

}）;

奥姆里·阿哈隆（Omri Aharon）

由于您尝试按值获取对象的Key，因此您无法真正使用括号表示法将其作为数组访问。我使用了一个可以在以下SO问题上找到的函数：JavaScript对象按值获取键

然后，我只是将您的点击部分更改为：

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

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。