how to change mapData with axios？

[xingdouchen]

beforeCreate(){ this.$axios.get('http://XXXX/read_geo_json/world.geo.json') .then(res=>{ this.mapData=res.data; this.Highcharts.maps['myMapName'] = this.mapData; }) .catch(function (error) { console.log(error); }); }

I want to change map from one country to another, by click button and send axios for another country.json, how can i do it? thanks~~

[wchmiel]

Hi @xingdouchen,

Thank you for contacting us. Check this demo with an example of updating a map using highcharts-vue: https://codesandbox.io/s/highcharts-vue-demo-forked-bdl43

The same should be done after the map is loaded using axios.

Kind regards!

[xingdouchen]

Hi @wchmiel thanks~, that solved my problem.

[xingdouchen]

@wchmiel I have another problem: I can't update the map immediately after I get the map data through axios： methods: { updateMap() { this.$axios.get('http://X.X.X.X:8000/read_geo_json/us-all.geo') .then(res=>{ // console.log(this.mapdata,typeof(this.mapdata)); this.mapdata=JSON.parse(res.data); this.data=[["Arizona",440615],["Colorado",423323], ["Minnesota",329068], ["Missouri",324877], ["Tennessee",311549], ["Indiana",289038], ["Wisconsin",264282], ["Oregon",259442], ["South Carolina",240816], ["Nevada",214986], ["Connecticut",210675], ["Louisiana",202271], ["Alabama",195499], ["Utah",191866], ["Kentucky",178050], ["Iowa",169456], ["Kansas",147975], ["Oklahoma",147922], ["DistrictofColumbia",117212], ["Nebraska",99561], ["Arkansas",97623], ["Idaho",97073], ["Mississippi",89822], ["NewHampshire",83013], ["Maine",74814], ["Hawaii",72618], ["NewMexico",71281], ["Montana",63844], ["RhodeIsland",61077], ["North Dakota",55064], ["Delaware",50752], ["WestVirginia",48634], ["Alaska",43870], ["South Dakota",43327], ["Vermont",38891], ["Wyoming",32257]]; // this.$nextTick(function () { // }) }) .catch(function (error) { console.log(error); }); this.chartOptions={ chart: { map: this.mapdata, }, title: { text: "Highmaps basic demo", }, mapNavigation: { enabled: true, buttonOptions: { alignTo: "spacingBox", }, }, colorAxis: { min: 0, }, series: [ { name: "Random data", states: { hover: { color: "#BADA55", }, }, dataLabels: { enabled: true, format: "{point.name}", }, allAreas: true, data: this.data, keys: ['woe-name', 'value'], joinBy:'woe-name' }, ] } } },

<button @click="updateMap()">update map and When I click the button the second time, the map is redrawed. I don't know why I need two clicks do you have any suggestion？thanks~

[xingdouchen]

I have solved the problem, this case help me:https://github.com/highcharts/highcharts-vue/issues/11 use vue computed ,such as ： computed: { chartOptions() { return { chart: { map: this.mapdata, }, title: { text: "Highmaps basic demo", }, mapNavigation: { enabled: true, buttonOptions: { alignTo: "spacingBox", }, }, colorAxis: { min: 0, }, series: [ { name: "Random data", states: { hover: { color: "#BADA55", }, }, dataLabels: { enabled: true, format: "{point.name}", }, allAreas: true, data: this.data , keys: ['woe-name', 'value'], joinBy:'woe-name' }, ] } } },