Harta FusionCharts XT cu Vue neafisare corespunzatoare

[sterica]

Salutare,
am urmatorul cod:

HTML:

Cod: Selectaţi tot

<div id="app-vue-harta">
                                <fusioncharts
                                        :type="type"
                                        :width="width"
                                        :height="height"
                                        :dataFormat="dataFormat"
                                        :dataSource="dataSource"
                                ></fusioncharts>
                            </div>

JS:

Cod: Selectaţi tot

let grphMap = new Vue ({
	el: '#app-vue-harta',
	data: {
		type: "maps/romania",
		....
		dataSource: {
			'chart': { },
			"data": [ {id: '10'} ],
  			"markers": { "shapes": [ {"id": "myCustomShape", "type": "circle", "fillcolor": "#f8bd19", "showborder": "0" } ],
                         "items": [ {shapeid: "myCustomShape", id: "10", x: "295.5", y: "283.5", // "radius": "1" } ],
                         "connectors": [
                           				// {"from": "10", "to": "11", "label": "text", "showtooltip": "1", "color": "#F4191F", "tooltext": ""}
                                       ]
						}
});

let app = new Vue ({
...
methods: {
fcnIdJudeteDelegatii() {
  let self = this;
  const ids = self.allDelegatii
    .map((item) => item.IdJudet)
    .filter(Boolean)
    .map((IdJudet) => IdJudet.split(",").map(id => id.trim()))
    .reduce((result, ids) => result.concat(ids), []);

  return ids.filter((id, i) => ids.indexOf(id) === i).sort();
},
fcnCoordonateJudete() {
  let self = this;
  let coordoJud = constCoordonateJudete;
  const idJud = this.fcnIdJudeteDelegatii();
  const coordJud = coordoJud.filter(item => {
          return idJud.indexOf(item.Id) != -1 ? true : false;
 });

 coordoJud = coordJud.map(item => {
                       return { shapeid: "myCustomShape",
                            id: (item.Id.length == 1) ? String(item.Id) : item.Id,
                            x: item.LabelPositionX,
                            y: item.LabelPositionY };
                    });
        return self.coordonateJudete = coordoJud;
 },
forGraficHarta() {
  grphMap.dataSource.data = [];
  grphMap.dataSource.markers.items = [];

  grphMap.dataSource.data = this.fcnIdJudeteDelegatii().map(item => { return {'id': item}; });
  grphMap.dataSource.markers.items = this.fcnCoordonateJudete();
},
filtrareHarta(value, input) {
   let self = this;
   self.allDelegatii = constAllDelegatii;

  if (value != '*' && input === 'personal') {
          self.allDelegatii = self.allDelegatii.filter(function (item) {
                return item.ID_DELEGAT_1 === value || item.ID_DELEGAT_2 === value;
          });
   }
   this.forGraficHarta();
}
});

Cand apelez pentru prima data functia filtrareHarta grphMap.dataSource.data si grphMap.dataSource.markers.items sunt completate corect.
Cand apelez a doua oara functia filtrareHarta se introduc noile date in grphMap.dataSource.data si grphMap.dataSource.markers.items dar raman si datele de la prima apelare a functiei.
Cand apelez a treia oara functia filtrareHarta se introduc noile date in grphMap.dataSource.data si grphMap.dataSource.markers.items dar raman si datele de la prima apaelare a functiei si asa la nesfarsit.

Ce pot face ca sa nu mai ramana “agatate” datele din prima apelare a functiei?

Multumesc!

Salut,
Cel mai probabil te poate ajuta cineva care are experienta cu Vue Js.
Eu nu am folosit Vue, dar incearca sa folosesti var la definirea grphMap:

Cod: Selectaţi tot

var grphMap = new Vue ({
  //...
})

Daca e la fel, posteaza codul complet pentru acea harta (inclusiv cu cele 3 apelari ale functiei filtrareHarta () ) ca sa vad cum apare si sa incerc diferite teste.

Am reusit intr-un final, foloseam libraria de la fusionChart local, acum o folosesc din CDN.
Desi am copiat continutul fisierului CDN local, tot nu vrea sa functioneze.