在弹出窗口中缺少图表上的行

时间:2017-08-09 13:34:51

标签: highcharts popup leaflet

我想知道是否有人能看到我出错的地方。我试图让我的线条在弹出窗口中显示在我的图表上。如果我将图表放在一个单独的div中而不是弹出窗口中,那么它的工作正常。我从Geoserver中提取数据,我可以看到所有数据都很好。我正在使用传单和Highcharts。

以下是相关代码。

    var field_boundaries = L.tileLayer.wms("http://localhost:1997/geoserver/RSAC/wms", {
        layers: 'RSAC:results_clipped_with_growth_small_new',
        format: 'image/png',
        transparent: true,
        version: '1.1.0',
        attribution: "myattribution"
        });


//loads the geojson layer
    var owsrootUrl = 'http://localhost:1997/geoserver/RSAC/wms';
    var defaultParameters = {
        service : 'WFS',
        version : '1.1.0',
        request : 'GetFeature',
        typeName : 'RSAC:results_clipped_with_growth_small_new',
        outputFormat : 'json',
        format_options : 'callback:getJson',
        SrsName : 'EPSG:4326'
    };
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var ajax = $.ajax({
    url : URL,
    dataType : 'json',
    jsonpCallback : 'getJson',
    success : function (response) {
    new L.geoJson(response, {
        onEachFeature: function (feature, url) {

        // Create div with class name highchart
        var div = L.DomUtil.create('div', 'highchart');

        // Bind popup to layer with div as content
        url.bindPopup(div);

        // Handle event when popup opens
        url.on('popupopen', function (e) {

            console.log(e.target);  // layer object
            console.log(e.target.feature); // layer's feature object
            console.log(e.popup); // popup object
            console.log(e.popup.getContent()); // the div


        $(".highchart").on('click', function onPopUpOpen(e){

                    $(".highchart")(e.popup.getContent(),{
                        chart: {
                            type: 'line',
                            renderTo: 'bindPopup'
                        },
                        title: {
                            text: 'Growth'
                        },
                        series: {
                            lineWidth:1,
                            colour: '#FF0000'
                            },

                        xAxis: {
                            allowDecimals: true,
                            categories: ['20151114', '20151126', '20151208', '20151220', '20160113', '20160125', '20160206', '20160218', '20160301', '20160313', '20160325', '20160406', '20160418', '20160430', '20160512', '20160524', '20160605', '20160629', '20160723', '20160804', '20160816'],
                            labels: {
                                formatter: function () {
                                    return this.value; 
                                }
                            }
                        },
                        yAxis: {
                                startOnTick: false,
                                minPadding: 0.05,
                            title: {
                                text: 'Crop Growth',

                            },
                            labels: {
                                formatter: function () {
                                    return this.value;
                                }
                            }
                        },

                       tooltip: {
                            pointFormat: '{series.name}{point.y}'
                        },
                        plotOptions: {
                                line: {
                                    dataLabels: {
                                        enabled: false
                                    },
                                    enableMouseTracking: true
                                    }
                                },

                        series: [{
                            cursor: 'pointer',
                            color: '#4D4D4D',
                            lineWidth: 3,
                            name: 'Growth',
                            data: [parseFloat(feature.properties.Date_20151114),parseFloat(feature.properties.Date_20151126),parseFloat(feature.properties.Date_20151208), parseFloat(feature.properties.Date_20151220), parseFloat(feature.properties.Date_20160113), parseFloat(feature.properties.Date_20160125), parseFloat(feature.properties.Date_20160206), parseFloat(feature.properties.Date_20160218), parseFloat(feature.properties.Date_20160301), parseFloat(feature.properties.Date_20160313), parseFloat(feature.properties.Date_20160325), parseFloat(feature.properties.Date_20160406), parseFloat(feature.properties.Date_20160418), parseFloat(feature.properties.Date_20160430), parseFloat(feature.properties.Date_20160512), parseFloat(feature.properties.Date_20160524), parseFloat(feature.properties.Date_20160605), parseFloat(feature.properties.Date_20160629), parseFloat(feature.properties.Date_20160723), parseFloat(feature.properties.Date_20160804), parseFloat(feature.properties.Date_20160816)]
                        }, 
                        ]

                        });
                        // Create the chart
                        //var chart = new Highcharts.Chart(options);

                });

             }).addTo(mymap);
         }
       });
      }
    }); 

0 个答案:

没有答案