标签: highmaps

我有一个 Vue 应用程序，它使用 highchart 和vue-highcart组件来绘制地图。我需要根据纬度和经度在这张地图上绘制点，根据Highmaps 文档，我必须使用 Proj4js。在普通的旧 javascript 中，我会简单地使用 a<script>将其放入我的页面，但我无法弄清楚如何以 ES6 方式进行操作。我尝试了以下方法：

import Proj4 from 'proj4';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';
import LoadHighmaps from 'highcharts/modules/map';

LoadHighmaps(Highcharts);
Vue.use(VueHighcharts, { Proj4, Highcharts })

// ....

<highmaps :options="options"></highmaps>

它不起作用。它默默地失败了。地图已绘制，但地图上未绘制任何点。如果你在这个小提琴上删除 Proj4Js，你会得到同样的行为：http : //jsfiddle.net/r9hugxsu/

有什么帮助吗？提前致谢。

编辑： 我知道我可以简单地将script标签放在我的 index.html 上。但我只是想知道是否有一种 ES6 方式来执行这种“包括依赖脚本”。

在进行下拉选择但是似乎无法使其工作时,尝试更改高图上的数据.我想我可能会在错误的事情上调用它(？)我知道change()被调用但数据点从不交换.

的jsfiddle

$(function () {
// Initiate the chart
$('#chart').highcharts('Map', {

    title: {
        text: 'Highmaps basic lat/lon demo'
    },

    mapNavigation: {
        enabled: true
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}</b><br>{point.z} Deliveries'
    },
    legend: {
        enabled: false
    },
    series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
        name: 'Basemap',
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-all-territories'],
            'mapline'),
        color: '#707070',
        showInLegend: false,
        enableMouseTracking: false
    }, { …

在Highcharts热图中,我通常定义一个click事件:

options.plotOptions = {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                /* action */
                }
            }
        }
    }
};

如何在此函数中获取xAxis和yAxis信息？

例如,在这个演示中,当我点击左上角的0.67时,我想提醒"星期五,亚历山大".

我可以将参数传递给这个函数吗？或者还有其他方法吗？

谢谢!:)

我正在将highcharts与highmaps一起使用。我必须显示状态级别的向下钻取。因此，我正在使用http://www.highcharts.com/maps/demo/latlon-advanced。我的代码如下：

    var baseMapPath = "https://code.highcharts.com/mapdata/";
    localStorage.setItem('locationHash', 'countries/us/us-all'),
    mapGeoJSON = null;
    function change() {
        console.log("localStorage : ", localStorage.getItem('locationHash'));
        var locationVariable = localStorage.getItem('locationHash') + '.js';
        var mapKey = locationVariable.slice(0, -3),
        javascriptPath = baseMapPath + locationVariable,
        up = angular.element(document.getElementById('up')),
        container = angular.element(document.getElementById('container')),
        containerHighcharts = container.highcharts();


        if (containerHighcharts) {
            containerHighcharts.showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
        }
        function mapReady(jsonData) {
            console.log("mapKey inside mapReady function : ", mapKey);
            console.log("Highcharts : ", Highcharts);
            console.log("typeof : ", typeof(Highcharts));
            mapGeoJSON = Highcharts.maps[mapKey];
            var data = jsonData,
                match;

            // …