AmCharts，停止傳播為“ clickGraph”的“ clickGraphItem”事件

Question

我使用AmCharts並想知道如何停止clickGraphItem事件傳播到clickGraph事件。

我要停止的原因是：

當我單擊XY圖表中的氣泡時，我使用Mustache在圖形下方繪制一個小表格，其中包含單擊項的dataContext中包含的信息。

由於圖上有很多氣泡，因此我希望能夠在單擊氣泡圖后在氣泡圖上突出顯示所選項目，以便讓用戶知道要為其編輯信息的點。

但是，如果用戶單擊圖上的空白區域（本身就是clickGraph事件），我想觸發event.chart.validateData(); 這樣，單擊的氣泡將恢復為原始顏色。

我遇到的問題是，當我單擊該項目時，我首先獲得了clickGraphItem事件觸發，但同時也觸發了clickGraph事件。

我試圖將event.event.stopPropagation()放在“渲染胡須和更改氣泡填充”方法的末尾，但這無濟於事。

我用來處理兩個事件的函數如下：

  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);

這里的想法是，如果事件來自某個項目，它將更改項目符號和筆觸的填充，然后使用該項目中的一些數據道具渲染一個表單。 如果事件中沒有項目和數據，則會渲染呈現的表單，然后將圖表重新繪制為原始樣式。

停止事件傳播在這里無濟於事，無法阻止clickGraph事件被觸發

對我在這里做錯的任何想法嗎？

謝謝

解決方案：事實證明，我試圖實現的目標不受標准AmCharts API的支持。 clickGraph事件不會在氣泡/ XY圖表的空白區域中觸發。 相反，我將事件附加到.amcharts-plot-area的click事件中。

    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);

因此，現在，當我單擊氣泡時，以前用highlight類設置樣式的所有氣泡都將被刪除。 然后，單擊的氣泡將其添加。

但是，當amcharts-plot-area發生單擊事件時，將amcharts-plot-area reset()函數，該函數將再次刪除所有突出顯示的類。

這解決了我的問題，但如下所述，無法停止事件傳播。

Answer 1

沒有一種方法可以防止圖表事件傳播。 圖表事件名稱在type屬性中傳遞，因此您可以使用它來確定所需的流程。 它不是很漂亮，但是您可以做的就是：

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

您還可以在觸發clickGraphItem時在圖表內設置一個自定義標志，以表明它剛剛被觸發，因此，如果它冒了氣泡，您就不執行任何其他邏輯，例如：

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')
    }
  }
}

演示版