Содержимое диаграммы не загружается во всплывающем окне

Question

Я пытаюсь получить всплывающее окно листовки, чтобы отобразить пончик Chart.js, но не могу заставить его работать. У меня есть всплывающее окно, но содержимое диаграммы не загружается.

onEachFeature: function(feature, layer) { 
    var chartData = [{ 
     value: 200, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Size" 
    }, { 
     value: 100, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Value" 
    }] 

    L.DomUtil.create('canvas', 'popupGraph'); 
    var ctx = document.getElementById("popupChart").getContext("2d"); 
    var chartOptions = { 
     animation: false 
    }; 

    new Chart(ctx).Doughnut(chartData, chartOptions); 

    var content = "<canvas id='popupChart'></canvas>; 
    layer.bindPopup(content) 

Answer 1

Я думаю, вам нужно внести несколько изменений, чтобы заставить его работать.

L.DomUtil.create ('холст', 'popupGraph');

Вы создаете брезентовый элемент с класса popupGraph, но не добавлять его в структуру DOM (т.е. нет контейнера). Я также не вижу, чтобы он использовался в образце кода.

---

вар CTX = document.getElementById ("popupChart") getContext ("2d").

В эта точка, я не думаю, что у вас есть элемент с ID = popupChart добавил (вы, кажется, добавив код , чтобы добавить его вниз по линии). Итак, если ваш HTML уже не имеет элемента с ID = popupChart, это не сработает.

---

новая диаграмма (CTX) .Doughnut (chartData, chartOptions);

...

layer.bindPopup (содержание)

Вы должны нарисовать диаграмму только после того, как холст элемент виден (в противном случае Chart.js будет считать ширину и высотой 0) и надлежащим образом. Вы должны перенести это на после, у вас есть ваш элемент холста, добавленный и видимый.

HTML (т. Е. Элемент холста) будет показан только после того, как будет всплывающее окно, которое, в свою очередь, произойдет только после нажатия на слой. Только после всплывающего окна, если вы сделаете новую диаграмму (ctx) ...