Блог

Я использую 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: {}
};
  

Мне нужно вызвать событие, когда пользователь нажимает на круговую диаграмму.Но приведенный выше код не работает.Пожалуйста, помогите мне?

По сути, вы используете стороннюю библиотеку в angularjs для удовлетворения ваших требований, поэтому любые изменения в отношении третьей стороны должны отражаться в вашей собственной области, поэтому вам следует использовать $scope.$apply().

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

Я надеюсь, что это поможет вам.:)

Я просто заменяю это в вашем коде 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')
        }
    }
}  

тогда все работает так, как вы ожидали. URL-адрес ссылки: напишите функцию обработки события щелчка в строке диаграммы