Использование встроенных данных на пользовательской карте в amcharts_4 - PullRequest
Новая
       8

Использование встроенных данных на пользовательской карте в amcharts_4

1 голос
/ 10 апреля 2020

Я создал пользовательскую карту JSON из карты usaLow для создания регионов. Все работает как положено, кроме случаев, когда я пытаюсь использовать онлайн-данные для изменения пользовательского поля описания. Пользовательский набор полигонов не будет читать встроенные данные. Я использую свои собственные идентификаторы, по типу "CMI-SW", "CMI-SE" и др. c. Я добавил свойство «описание», и оно будет отображаться, но не будет перезаписывать его в шаблоне многоугольника.

Примеры приведены непосредственно на учебном сайте amcharts. Он отлично работает для карт, которые поставляются с загрузкой amcharts_4. 

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;

// Set projection
 chart.projection = new am4maps.projections.Miller();
// Set projection
// chart.projection = new am4maps.projections.Orthographic();
// chart.panBehavior = "rotateLongLat";

chart.seriesContainer.cursorOverStyle = am4core.MouseCursorStyle.grab;
chart.seriesContainer.cursorDownStyle = am4core.MouseCursorStyle.grabbing;

// Add zoom control
chart.zoomControl = new am4maps.ZoomControl();

var home = chart.chartContainer.createChild(am4core.Button);
home.label.text = "Home";
home.align = "right";
home.events.on("hit", function(ev) {
  chart.goHome();
});

chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#ffffff");
chart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 0.1;

// Series for World map
 var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
 worldSeries.useGeodata = true;

 worldSeries.data = [{
   id: "US",
   disabled: true
 }, {
  "id": "CA",
  "color": am4core.color("#3F4B3B"),
  "description": "Canada is a North American country stretching from the U.S. in the south to the Arctic Circle in the north. Major cities include massive / // Toronto, west coast film centre Vancouver, French-speaking Montréal and Québec City, and capital city Ottawa. Canada's vast swaths of wilderness include lake-filled Banff National Park in the Rocky Mountains. It's also home to Niagara Falls, a famous group of massive waterfalls."
}, {
  "id": "MX",
  "color": am4core.color("#3F4B3B"),
  "description": "Mexico is a country between the U.S. and Central America that's known for its Pacific and Gulf of Mexico beaches and its diverse landscape of mountains, deserts and jungles. Ancient ruins such as Teotihuacán and the Mayan city of Chichén Itzá are scattered throughout the country, as are Spanish colonial-era towns. In capital Mexico City, upscale shops, renowned museums and gourmet restaurants cater to modern life."
}];

 var polygonTemplateWorld = worldSeries.mapPolygons.template;
 polygonTemplateWorld.tooltipHTML = "{id}";
 polygonTemplateWorld.fill = am4core.color("#74B266");
 polygonTemplateWorld.description = "description";

 polygonTemplateWorld.events.on("hit", hit); 

 var hsWorld = polygonTemplateWorld.states.create("hover");
  hsWorld.properties.fill = am4core.color("#367B25");

 // Series for United States map
 var usaSeries = chart.series.push(new am4maps.MapPolygonSeries());
 usaSeries.geodata = am4geodata_usaLow
 usaSeries.useGeodata = true;

 usaSeries.data = [{
"id": "US-AZ",
"color": am4core.color("#3F4B3B"),
 "description": "Yeah, I'm from Tucson!"
 }];

 var polygonTemplateUS = usaSeries.mapPolygons.template;
 polygonTemplateUS.tooltipHTML = "{id}";
 polygonTemplateUS.fill = am4core.color("#74B266");

 polygonTemplateUS.events.on("hit", hit); 

 var hsUS = polygonTemplateUS.states.create("hover");
 hsUS.properties.fill = am4core.color("#367B25");

 // Series for United States map
 var CMIRegionalSeries = chart.series.push(new am4maps.MapPolygonSeries());
 CMIRegionalSeries.geodata = am4geodata_usaLowCMIRegional
 CMIRegionalSeries.useGeodata = true;

 CMIRegionalSeries.data = [{
"id": "CMI-SC",
"color": am4core.color("#3F4B3B"),
 "description": "Yeah, I like Sweet Tea!"
 }];

 var polygonTemplateRegion = CMIRegionalSeries.mapPolygons.template;
 polygonTemplateRegion.tooltipHTML = "{name}";
 polygonTemplateRegion.fill = am4core.color("#74B266");

 polygonTemplateRegion.events.on("hit", hit); 

 var hsReg = polygonTemplateRegion.states.create("hover");
 hsReg.properties.fill = am4core.color("#367B25");



 // chart.legend = new am4maps.Legend();
 // chart.legend.position = "left";

/* Events */

function hit(ev) {
//  chart.zoomToMapObject(ev.target);
  var data = ev.target.dataItem.dataContext;
  var popupContent = "";
  if (data.description) {
    popupContent += data.description;
  }
  else {
    popupContent += "<i>No description provided.</i>";
  }
  chart.closeAllPopups();
  chart.openPopup(popupContent,"<strong>" + "<h3>" + data.name + " (" + data.id  + ")</h3>" + "</strong>");
}

Будем благодарны за любые предложения!

...