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（＆＃39; canvas＆＃39;，＆＃39; popupGraph＆＃39;）;

您正在使用 class popupGraph创建一个canvas元素，但是您不能将它附加到DOM结构（即没有容器）。我也没有在代码示例中看到它。

var ctx = document.getElementById（＆＃34; popupChart＆＃34;）。getContext（＆＃34; 2d＆＃34;）;

在这一点，我认为你没有添加ID = popupChart的元素（你好像在添加代码来添加））。因此，除非你的HTML已经有一个ID = popupChart的元素，否则这不会起作用。

新图表（ctx）.Doughnut（chartData，chartOptions）;

...

layer.bindPopup（内容）

只有在canvas元素可见时才会绘制图表（否则Chart.js将假设宽度和高度为0）并且大小合适。您需要在之后将其移动到，并添加并显示您的canvas元素。

只有弹出窗口可见后才会显示HTML（即画布元素），而弹出窗口只会在您点击图层后才会显示。只有在弹出窗口打开后才能执行新的图表（ctx）...

图表内容未在弹出窗口中加载

1 个答案: