在传单弹出窗口内创建画布不能正常工作

时间:2017-03-21 06:59:47

标签: javascript angular leaflet gis

我的app需要leaflet的帮助。首先让我解释一下我的问题, 我在标记弹出窗口中插入了Chart JS元素。当我点击标记时,它向我显示了我为弹出窗口创建元素的所有DOM元素。但是当我在关闭当前弹出窗口之前单击其他标记时,Chart元素工作正常。仅Chart元素发生故障..而不是其他DOM元素。 我试图讲述的截图如下。 第一张图片解释当我点击一个标记时所有弹出窗口全部关闭。

enter image description here

第二张图片是标记打开时的颜色..

enter image description here

如您所知,此canvas元素是我的Chart元素。

let title="<div style='margin-left:10px;'><canvas style='clear:both; 
position: relative;' id='myChart'></canvas></div>";

let marker = L.marker([parseFloat(poiData.lat), parseFloat(poiData.lon)],{
  data:{poiData,polyline}
});

marker.unbindPopup().bindPopup(title, { 
  autoPan:true,
  maxWidth: "auto"
}).openPopup();

marker.addTo(this.iconLayer);

marker.on("click", (event: MouseEvent) => {
  let ctx = document.getElementById("myChart");
  let myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      datasets: [{
        label: 'Grafik',
        data: [2, 29, 5, 5, 2, 3, 10],
        backgroundColor: "rgba(255,153,0,0.4)"
      }]
    },
    options: {
      responsive: true
    }
  });
});

请您建议我解决这个问题的方法吗?

0 个答案:

没有答案