Question

我使用Angular-nvd3绘制饼图。

HTML

<nvd3 options="options.chart.options" data="options.chart.data" api="options.chart.api" config="config" events="events"></nvd3>

的Javascript

$scope.options.chart = {
    options: {
        chart: {
            type: 'pieChart',
            height: 500,
            margin: {
                top: 0,
                right: 40,
                bottom: 80,
                left: 40
            },
            x: function(d) {
                return d.key;
            },
            y: function(d) {
                return d.y;
            },
            showLabels: true,
            duration: 1500,
            labelThreshold: 0.01,
            showLegend: true,
            lines: {
                dispatch: {
                    elementClick: function(e) {
                        console.log('click')
                    },
                    elementMouseover: function(e) {
                        console.log('mouseover')
                    },
                    elementMouseout: function(e) {
                        console.log('mouseout')
                    }
                }
            }
        }
    },
    data: [{
        key: "One",
        y: 5
    }, {
        key: "Two",
        y: 2
    }, {
        key: "Three",
        y: 9
    }, {
        key: "Four",
        y: 7
    }, {
        key: "Five",
        y: 4
    }, {
        key: "Six",
        y: 3
    }, {
        key: "Seven",
        y: .5
    }],
    api: {}
};

当用户点击饼图时，我需要调用一个事件。但上面的代码不起作用。请帮帮我？

Answer 1

基本上你在angularjs中使用第三方库以满足你的要求，所以对第三方的任何改变都应该反映在你自己的范围内，所以你应该使用$ scope。$ apply（）。

 elementClick: function(e) {
                    $scope.$apply();
                    console.log('click')
                }

我希望这会对你有所帮助。：）

Answer 2

我只是将其替换为您的JavaScript代码

lines: {
    dispatch: {
        elementClick: function(e){
            $scope.$apply();
            console.log('click')
        },
        elementMouseover: function(e){
            $scope.$apply();
            console.log('mouseover')
        },
        elementMouseout: function(e){
            $scope.$apply();
            console.log('mouseout')
        }
    }
}

使用

pie: {
    dispatch: {
        elementClick: function(e){
            $scope.$apply();
            console.log('click')
        },
        elementMouseover: function(e){
            $scope.$apply();
            console.log('mouseover')
        },
        elementMouseout: function(e){
            $scope.$apply();
            console.log('mouseout')
        }
    }
}

然后按预期工作。参考网址：write click event handle function on pieChart line

elementClick事件未在angular-nvd3图表中触发

2 个答案: