AmCharts, stoppen Sie ein 'clickGraphItem' Ereignis propagiert zu 'clickGraph'

Question

Ich benutze AmCharts und möchte wissen, wie das clickGraphItem Ereignis zu einem clickGraph Ereignis zu stoppen.

Der Grund, warum ich es stoppen will, ist dies:

Wenn ich auf einer Blase klicken Sie in einem XY-Diagramm I Schnurrbart verwenden, um eine kleine Form unter dem Diagramm mit den Daten in den dataContext des angeklickten Artikel enthielt zu machen.

Da sich auf dem Plot viele Blasen befinden, möchte ich das ausgewählte Element im Blasendiagramm markieren können, nachdem es angeklickt wurde, um den Benutzer wissen zu lassen, für welchen Punkt die Information bearbeitet wird.

Wenn der Benutzer jedoch in den leeren Bereich des Diagramms klickt (das clickGraph -Ereignis selbst), möchte ich event.chart.validateData(); auslösen, damit die angeklickte Blase in die ursprünglichen Farben zurückkehrt.

Das Problem, das mir begegnet, ist, dass, wenn ich auf das Element klicke ich zuerst die clickGraphItem Ereignis feuern, aber das löst auch das clickGraph Ereignis.

Ich habe versucht, event.event.stopPropagation() am Ende der "Render Moustache und ändern Füllung der Blase" -Methode, aber das tut nichts.

Die Funktion ich beide Ereignisse behandeln bin mit unter:

function showPointForm(event) { 
    var ev = event 

    if (ev.item && ev.item.dataContext.data != undefined) { 
     var bullet = ev.item.bulletGraphics.node; 
     bullet.setAttribute("stroke",colors.info); 
     bullet.setAttribute("fill",colors.warning); 
     $(document).find('#form-area').html(
      Mustache.render($(document).find('#form-template').html(),{ 
       data : ev.item.dataContext.data 
      }) 
     ) 
    }else{ 
     $(document).find('#form-area').html('') 
     event.chart.validateData(); 
    } 
    ev.event.stopPropagation() 
    } 

var chart = AmCharts.makeChart('div',configObject) 
chart.addListener("clickGraphItem",showPointForm); 
chart.addListener("clickGraph",showPointForm); 

Die Idee dabei ist, dass, wenn das Ereignis von einem Element ist, wird es die Füllung der Kugel und dem Hub, ändern und dann Rendern Sie ein Formular mit einigen Daten aus dem Objekt. Wenn für das Ereignis kein Element und keine Daten vorhanden sind, wird das gerenderte Formular übernommen, und das Diagramm wird in ursprüngliche Formate neu gezeichnet.

Das Anhalten der Ereignispropagierung ist hier nichts das clickGraph Ereignis zu stoppen

gefeuert Alle Ideen, was ich hier falsch mache?

Dank

LÖSUNG: Es stellt sich heraus, dass das, was ich nicht über die Standard-amCharts API unterstützt zu erreichen versuchte. Das Ereignis clickGraph wird nicht in einem leeren Raum in einem Bubble/XY-Diagramm ausgelöst. Stattdessen habe ich ein Ereignis an das click-Ereignis der .amcharts-plot-area angeschlossen.

function showPointForm(event) { 
    var ev = event 

    if (ev.item && ev.item.dataContext.data != undefined) { 
     $(document).find('.highlight').each(function(){ 
      $(this).attr('class', 'amcharts-graph-bullet'); 
     }) 
     var bullet = ev.item.bulletGraphics.node; 
     bullet.setAttribute("class",'highlight amcharts-graph-bullet'); 
     $(document).find('#form-area').html(
      Mustache.render($(document).find('#form-template').html(),{ 
       data : ev.item.dataContext.data 
      }) 
     ) 
    }else{ 
     $(document).find('#form-area').html('') 
     event.chart.validateData(); 
    } 
    } 

    function reset(){ 
    $(document).find('#form-area').html('') 
    timelineChart.validateData(); 
    } 

var chart = AmCharts.makeChart('div',configObject) 
chart.addListener("clickGraphItem",showPointForm); 
$(document).on("click",'.amcharts-plot-area',reset); 

Also wenn ich jetzt auf eine Blase klicken, werden alle Blasen, die zuvor mit dem highlight Klasse gestylt wurden, haben diese Klasse entfernt. Dann hat die angeklickte Blase es hinzugefügt.

Wenn in der amcharts-plot-area jedoch ein Klickereignis auftritt, wird die reset()-Funktion aufgerufen, die alle markierten Klassen wieder entfernt.

Dies löst mein Problem, aber wie unten angegeben ist das Stoppen der Ereignisausbreitung nicht möglich.

Answer 1

Es gibt keine Möglichkeit, die Übertragung von Diagrammereignissen zu verhindern. Der Name des Diagrammereignisses wird in der Eigenschaft type übergeben. Sie können damit den gewünschten Datenfluss ermitteln.Es ist nicht schön, aber das ist alles, können Sie tun:

function showPointForm(event) { 
    if (event.type == "clickGraphItem") { 
    // logic for clickGraphItem only 
    } 
    else { 
    // logic for clickGraph 
    } 
} 

Sie auch eine eigene Flagge innerhalb des Diagramms einstellen könnte, wenn die clickGraphItem abgefeuert wird, um anzuzeigen, dass es nur so ausgelöst wurde, wissen Sie keine zusätzliche Logik auszuführen, wenn es wurde gesprudelt, zum Beispiel:

function clickGraphHandler(event) { 
    if (event.type == "clickGraphItem") { 
    event.chart.clickGraphItemFired = true; 
    console.log('clickGraphItem') 
    } else { 
    if (event.chart.clickGraphItemFired) { 
     event.chart.clickGraphItemFired = false; 
     console.log('clickGraph - bubbled from clickGraphItem'); 
    } else { 
     console.log('clickGraph - not bubbled from clickGraphItem') 
    } 
    } 
} 

Demo