Как я могу разместить событие MouseOver на панели диаграммы DiscreteBar

0

Я пытаюсь создать диаграмму aa с помощью угловой директивы NVD3 отсюда: http://krispo.github.io/angular-nvd3/#/

Диаграмма, которую я использую, такова: http://krispo.github.io/angular-nvd3/#/discreteBarChart

Это мой html для создания диаграммы на странице (контекст не кажется важным в этом сценарии):

                    <nvd3 options="options"
                          data="top10bar"
                          ng-mouseenter="mouseEnterEvent($event)"></nvd3>

Это код контроллера (внутри которого находится тег)

app.controller('BarChartController', function ($ scope) {

$scope.options = {
    chart: {
        type: 'discreteBarChart',
        height: 350,
        margin: {
            top: 20,
            right: 20,
            bottom: 60,
            left: 55
        },
        width: 500,
        x: function (d) {
            return d.label;
        },
        y: function (d) {
            return d.value;
        },
        showValues: true,
        transitionDuration: 500,
        xAxis: {
            axisLabel: 'X Axis'
        },
        yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: 30
        },
        tooltips: false,
        discretebar: {
            rectClass: ['discreteBar', 'tableRow']
        },
        interactive: true
    }
};

$scope.mouseEnterEvent = function (event) {

    console.log("EVENT!");
    console.log(event);
};

$scope.$on('elementMouseover.tooltip', function (event, data) {
    console.log("In scope.on");
    console.log(event);
    console.log(data);
    console.log("end");
});

$scope.$on('tooltipShow.directive', function (angularEvent, event) {
    angularEvent.targetScope.$parent.event = event;
    angularEvent.targetScope.$parent.$digest();
});

Из трех обработчиков событий, которые вы видите внизу контроллера, работает только первый, потому что у меня есть опция ng-mouseenter, указанная в nvd3. Однако это работает, когда мышь входит во весь диаграмм div. Я хочу, чтобы наведите мышь на отдельную панель, чтобы я мог выделить ее, а затем выделить другую часть моего представления.

Как вы собираетесь делать то, что я пытаюсь достичь здесь? Любая помощь очень ценится, ура!

Теги:
angularjs-nvd3-directives

1 ответ

0

У меня была такая же проблема, чтобы обнаружить событие на панели, на которой я написал следующее.

$scope.mouseEnterEvent = function (event) {
    if (event.target.localName === 'rect') {
        /// Do your operation here.
    }
};

Это сработало для меня. Надеюсь, это поможет вам, дайте мне знать, если вы найдете лучший способ передать событие, чтобы составить диаграмму.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню