Я использую официальную оболочку 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>
Но без удачи.Любые мысли о том, как заставить это работать?