Highcharts Vue地图图表无法显示CSV导出选项，求排查解决

我使用Highcharts Vue构建了世界地图图表，希望通过export-data模块将数据导出为CSV格式，但图表未显示该导出选项。以下是相关代码：

main.js #

import Vue from "vue";
import App from "./App.vue";
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import HighchartsAccessibility from "highcharts/modules/accessibility";
import HighchartsExporting from "highcharts/modules/exporting";
import HighchartsExportData from "highcharts/modules/export-data";
import mapInit from "highcharts/modules/map";
import mapData from "@highcharts/map-collection/custom/world.geo.json";

mapInit(Highcharts);
Highcharts.maps["myMapName"] = mapData;
HighchartsAccessibility(Highcharts);
HighchartsExportData(Highcharts);
HighchartsExporting(Highcharts);
Vue.use(HighchartsVue);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

MapChart.vue #

<template>
  <highcharts
    :constructor-type="'mapChart'"
    :options="mapOptions"
    class="map"
  ></highcharts>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        chart: { map: "myMapName" },
        title: { text: "World Map" },
        accessibility: { enabled: false },
        credits: { enabled: false },
        mapNavigation: {
          enabled: true,
          buttonOptions: { verticalAlign: "bottom" }
        },
        colorAxis: {
          min: 3,
          minColor: "#efecf3",
          maxColor: "#990041",
          max: 17246092
        },
        tooltip: {},
        series: [
          {
            colorKey: "visits",
            data: [
              { country: "Albania", visits: 53441 },
              { country: "Algeria", visits: 9304 },
              // 其余国家数据省略
              { country: "North Korea", visits: 90 }
            ],
            joinBy: ["name", "country"],
            name: "Visits",
            dataLabels: { enabled: false }
          }
        ]
      };
    };
  }
};
</script>
<style scoped>
.map { min-height: 500px; }
</style>

1. 修正模块加载顺序 #

export-data模块依赖exporting模块，必须先初始化exporting再初始化export-data，否则CSV导出选项无法被注入到导出菜单中。

修改main.js中的模块初始化顺序：

// 先初始化exporting
HighchartsExporting(Highcharts);
// 再初始化export-data
HighchartsExportData(Highcharts);

2. 显式配置导出菜单选项 #

地图图表需要显式声明导出菜单的可选项，确保CSV导出被包含在内。在mapOptions中添加exporting配置：

exporting: {
  buttons: {
    contextButton: {
      menuItems: [
        'downloadPNG',
        'downloadJPEG',
        'downloadPDF',
        'downloadSVG',
        'separator',
        'downloadCSV',
        'downloadXLS'
      ]
    }
  }
}

main.js #

import Vue from "vue";
import App from "./App.vue";
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import HighchartsAccessibility from "highcharts/modules/accessibility";
import HighchartsExporting from "highcharts/modules/exporting";
import HighchartsExportData from "highcharts/modules/export-data";
import mapInit from "highcharts/modules/map";
import mapData from "@highcharts/map-collection/custom/world.geo.json";

mapInit(Highcharts);
Highcharts.maps["myMapName"] = mapData;
HighchartsAccessibility(Highcharts);
// 调整顺序：先exporting，再export-data
HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);
Vue.use(HighchartsVue);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

MapChart.vue #

<template>
  <highcharts
    :constructor-type="'mapChart'"
    :options="mapOptions"
    class="map"
  ></highcharts>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        chart: { map: "myMapName" },
        title: { text: "World Map" },
        accessibility: { enabled: false },
        credits: { enabled: false },
        // 添加导出配置
        exporting: {
          buttons: {
            contextButton: {
              menuItems: [
                'downloadPNG',
                'downloadJPEG',
                'downloadPDF',
                'downloadSVG',
                'separator',
                'downloadCSV',
                'downloadXLS'
              ]
            }
          }
        },
        mapNavigation: {
          enabled: true,
          buttonOptions: { verticalAlign: "bottom" }
        },
        colorAxis: {
          min: 3,
          minColor: "#efecf3",
          maxColor: "#990041",
          max: 17246092
        },
        tooltip: {},
        series: [
          {
            colorKey: "visits",
            data: [
              { country: "Albania", visits: 53441 },
              { country: "Algeria", visits: 9304 },
              // 其余国家数据省略
              { country: "North Korea", visits: 90 }
            ],
            joinBy: ["name", "country"],
            name: "Visits",
            dataLabels: { enabled: false }
          }
        ]
      };
    };
  }
};
</script>
<style scoped>
.map { min-height: 500px; }
</style>

完成以上修改后，图表的导出菜单中就会出现CSV和XLS的下载选项，点击即可导出对应格式的数据。

内容的提问来源于stack exchange，提问作者nb_nb_nb