Мой холст onclick дает мне результаты не того холста - как мне убедиться, что правильный холст отвечает?

Question

Итак, у меня есть холст.

<canvas style ="width: 30em; height:30em; overflow:visible;"  id="GraphCanvas<?echo $this->id;?>"></canvas>

Я генерирую их в PHP. Затем я делаю диаграмму -

    var ourChart = new Chart(ctx, {
      type: <?echo "'".$this->graphtype."'"?>,
      data: {
        labels: <?echo $arrParsed["labels"];?>, 
        keys: <?echo $arrParsed["keys"];?>,
        datasets: [{
          data:<?echo $arrParsed["data"];?>,
          backgroundColor: <?echo $arrParsed["color"]?>
        }]
      },
      options: {
        //Irrelevant graphics options
      }
    });

И затем я делаю щелчок и прикрепляю его к холсту, чтобы я мог делать модные вещи -

var canvas =  document.getElementById("GraphCanvas<?echo $this->id;?>");
canvas.onclick = function(e) {
      var slice = ourChart.getElementAtEvent(e);
        if(!slice.length) {
          return;
        }
        key = slice[0]._chart.config.data.keys[slice[0]._chart.config.data.labels.indexOf(slice[0]._model.label)]; //The array is indexed differently than the keys, and might be fubar, so we have to actually check the key at the same array index of the label we're looking at.  The key is the array index of the arrBuckets[] item in this graph!  EDIT: chartjs provides a _model that has the index, so you can just use that instead of fishing like I did.  Leaving this how it is because it works and for educational purposes


        console.log(slice);
        console.log(key);
        document.getElementById('bucketdrillid').value=key;
        //document.getElementById('graph<?echo $this->id;?>').submit();
}

Я добавляю второй холст, с ID 2, затем третий холст, с ID 3.

Теперь у меня есть 3 прекрасных графика с 3 прекрасными графиками. Чтобы вызвать эту функцию, я щелкаю на холсте.

Но независимо от того, на каком холсте я щелкаю, возвращаемый объект в срезе всегда находится на последнем загруженном холсте, а не на том, на котором я фактически щелкнул.

Еще более странно, что местоположение, на котором я щелкаю на одном холсте, фактически идеально соответствует тому, где на самом деле находятся срезы на более позднем холсте - поэтому, если я щелкну в верхнем левом углу самого верхнего, getElementAtEvent вернет верхний левый срезсамый нижний график!

Как мне убедиться в том, что, когда у меня несколько холстов, нажатие на определенный холст возвращает мне элемент из этого холста, а не последний загруженный холст?