在 Mapbox 标记弹出窗口中显示 Highchart 折线图

Question

我的目标是在 Mapbox 弹出窗口中显示两个小的 Highchart 折线图（高度：100 像素；）。我在 HTML 内有两个 div 来保存图表，如下图所示，它似乎是图表，因为轴显示得很好。

令我困惑的是系列和标记没有显示，除了被 y 轴分割的第一个标记的一半。检查 Chrome 中的 Highchart 元素时，标记和系列的所有路径似乎都位于正确的位置并标记为可见性 ="visible"。

有没有人运行遇到过类似的问题？

更新：现场演示 - http://jsfiddle.net/calanoue/tf95sLsu/

<head lang="en">
<title></title>
</head>
<body>
<div id='map'></div>
<script>
...
</script>
</body>

Answer 1

我试试这个解决方案，希望对你有帮助， JSFiddle

HTML:

<head lang="en">
    <title></title>
</head>
<body>
    <div id='map'></div>

</body>

CSS:

  body {
       margin: 0;
       padding: 0;
   }
   #map {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 100%;
   }

   .sparkline {
       height: 100px;
       width: 200px;
   }

jQuery:

L.mapbox.accessToken = 'pk.eyJ1IjoibmF1dGlseXRpY3MiLCJhIjoidG5tdktlMCJ9.Ktr2w0QzGrAN2UNtrJJziw';

var map = L.mapbox.map('map', 'nautilytics.icjmd18i').setView([37.8, -96], 4);
var myLayer = L.mapbox.featureLayer().addTo(map);

 var portGeoJSON = {
            "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                    "geometry": {
                    "type": "Point",
                        "coordinates": [-74.0047538280487, 40.7590498275021]
                },
                    "properties": {
                    "title": "NEW YORK",
                        "est_value": 13639833,
                        "marker-color": "#0000ff",
                        "marker-size": "medium",
                        "marker-symbol": "harbor"
                }
            }]
        };

var lineChartOptions = {
            title: {
                text: null
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                backgroundColor: {
                    linearGradient: [0, 0, 0, 60],
                    stops: [
                        [0, '#FFFFFF'],
                        [1, '#E0E0E0']
                    ]
                },
                borderWidth: 1,
                useHTML: true,
                borderColor: '#AAA'
            },
            yAxis: {
                min: 0,
                lineWidth: 1,
                tickWidth: 1,
                title: {
                    text: null
                },
                labels: {
                    style: {
                        'fontSize': '10px'
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    style: {
                        'fontSize': '10px'
                    }
                }
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    connectNulls: false
                }
            }
        };

myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;


    lineChartOptions.tooltip.formatter = function() {
                var y = "$" + this.y;
                return '<center>' + Highcharts.dateFormat('%b \'%y', new Date(this.x)) + '</center></b><center><b>' + y + '</b></center>';
            };
    lineChartOptions.series = [{
                pointInterval: 24 * 3600 * 1000 * 30.41667,
                pointStart: 1393632000000,
                data: [
                58044, 60871, 29738, null, 804997, 628727, 20678, null,
                100606, 122195, 981459, 39840]
            }];


     // HTML content for pop-up
           var popupContent = '<div id="popup_template">' +
        '<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
        '<div class="est_value marker-title">'+
               'Est. Value: $' + e.layer.feature.properties.est_value
               +'</div>' +
        '<div id="est_value_sparkline" class="sparkline"></div>';


    var container = $('<div id="popup_template"/>');


    container.html( '<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
        '<div class="est_value marker-title">'+
               'Est. Value: $' + e.layer.feature.properties.est_value
               +'</div>' +
        '<div id="est_value_sparkline" class="sparkline"></div>');

// Delegate all event handling for the container itself and its contents to the container
container.find('#est_value_sparkline').highcharts(lineChartOptions);


    marker.bindPopup(container[0]);
});

myLayer.setGeoJSON(portGeoJSON);

在 Mapbox 标记弹出窗口中显示 Highchart 折线图

Displaying a Highchart Line Chart in Mapbox Marker Pop-up

javascript

jquery

highcharts

mapbox