Question

我正在为highcharts-vue项目使用官方的vue包装器。在官方文档之后，我的main.js如下所示：

import HighchartsVue from 'highcharts-vue'
import Highcharts from "highcharts";
import HighchartsNoData from "highcharts/modules/no-data-to-display";
import mapInit from 'highcharts/modules/map'

HighchartsNoData(Highcharts);
mapInit(Highcharts);

Vue.use(HighchartsVue);

我的图表选项如下：

let zpSimChart = {
chart: {
        map: 'countries/nl/nl-all-all',
        backgroundColor: 'transparent'
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    tooltip: {
        backgroundColor: '#2A3F54',
        formatter: function() {
            return this.point.name;
        },
        style: {
            color: '#FFFFFF',
            fontSize: '10px'
        }
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    mapNavigation: {
        enabled: true
    },
    series: [{
        allowPointSelect: true,
        data: [{"code":"nl-gr-gm0003","value":3,"name":"Test"},{"code":"nl-gr-gm0005","value":5,"name":"Test2"}],
        name: 'Groei',
        joinBy: ['hc-key', 'code'],
        states: {
            hover: {
                color: '#7E91AA'
            },
            select: {
                color: '#3B9FF3',
                enabled:true
            }
        },
        color: '#0B62A4',
        dataLabels: {
            enabled: false,
        }
    }],
    colorAxis: {
        dataClasses: [{
            to: 9999,
            color: '#0B62A4'
        }]
    },
    exporting: {
        enabled: false
    }
};
export { zpSimChart }

我遗漏了大部分数据（以保留本问题中的备用代码）。我将选项导入了vue组件中，并将它们分配给zpSimChart，如下所示：

import { zpSimChart } from "./zpsimchart.js"
    export default {
        name: "zpsim",
        data() {
            return {
                zpSimChart: zpSimChart,
                alertVariant: "",
                alertMsg: "",
                showAlert: false,
                showSpinner: false,
            }
        }

最后，图表标签如下所示：

<highcharts :constructor-type="'mapChart'" :options="zpSimChart"></highcharts>

现在，我可以看到该图表已被识别（即该图表的缩放按钮可见）。

我认为我的问题是，我必须在某个地方为荷兰指定实际的javascript地图，但是官方文档没有说明在使用highcharts-vue包装程序时该怎么做。我的参考文献是我的旧jQuery项目，在该项目中地图确实起作用，并且我曾经将实际地图包含在脚本标签中，如下所示：

<script src="https://code.highcharts.com/mapdata/countries/nl/nl-all-all.js"></script>

我已经尝试像这样在我的index.html中添加脚本标签：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/static/icon/favicon.png">
    <script src="https://code.highcharts.com/mapdata/countries/nl/nl-all-all.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

但是没有运气。对如何使它起作用有任何想法吗？

Answer 1

所以我发现我没有正确设置Highcharts.maps。我在main.js中添加了以下调整：

import { mapNetherlands } from "./assets/maps/netherlands"
Highcharts.maps["countries/nl/nl-all-all"] = mapNetherlands;

现在我的地图可以正确显示。

无法使地图与highcharts-vue一起使用

1 个答案: