#javascript #http-status-code-404 #amcharts
#javascript #http-status-code-404 #amcharts
Вопрос:
Я пытаюсь прикрепить ссылку на другую страницу при нажатии на отдельную страну. На данный момент я добавил одну URL-ссылку на Алжир (id: DZ):
{ "data": [{"id": "DZ"}], "url": "https://en.wikipedia.org/wiki/Algeria" }
Однако, когда я нажимаю на карту, она возвращает ошибку 404 not found, она также преобразует адрес в {url}. Я запускаю свой сайт на localhost. Я попытался добавить как реальный веб-сайт (https://en.wikipedia.org/wiki/Algeria ) и путь к одной из моих локальных страниц html-файла, но оба возвращают одну и ту же ошибку. Это происходит потому, что я использую localhost или потому, что мой код неверен?
Функция, используемая для ссылки на URL при нажатии на страну:
mapPolygonTemplate.events.on("hit", function(ev) {
ev.target.series.chart.url = "{url}";
});
Кроме того, ссылка локализована не для одной страны на карте, ошибка возникает при нажатии на любое место на карте. Как я могу убедиться, что у каждой страны есть своя уникальная ссылка, когда я прикрепляю их все?
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldUltra;
chart.projection = new am4maps.projections.Miller();
chart.zoomControl = new am4maps.ZoomControl();
var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
longitude: 16.5,
latitude: 3.8
};
var groupData = [{
"data": [{
"id": "DZ",
"url": "https://en.wikipedia.org/wiki/Algeria"
}]
},
{
"data": [{
"id": "AO"
}]
},
{
"data": [{
"id": "BJ"
}]
},
{
"data": [{
"id": "BW"
}]
},
{
"data": [{
"id": "BF"
}]
},
{
"data": [{
"id": "BI"
}]
},
{
"data": [{
"id": "CM"
}]
},
{
"data": [{
"id": "CV"
}]
},
{
"data": [{
"id": "CF"
}]
},
{
"data": [{
"id": "KM"
}]
},
{
"data": [{
"id": "CD"
}]
},
{
"data": [{
"id": "DJ"
}]
},
{
"data": [{
"id": "EG"
}]
},
{
"data": [{
"id": "GQ"
}]
},
{
"data": [{
"id": "ER"
}]
},
{
"data": [{
"id": "ET"
}]
},
{
"data": [{
"id": "GA"
}]
},
{
"data": [{
"id": "GM"
}]
},
{
"data": [{
"id": "GH"
}]
},
{
"data": [{
"id": "GN"
}]
},
{
"data": [{
"id": "GW"
}]
},
{
"data": [{
"id": "CI"
}]
},
{
"data": [{
"id": "KE"
}]
},
{
"data": [{
"id": "LS"
}]
},
{
"data": [{
"id": "LR"
}]
},
{
"data": [{
"id": "LY"
}]
},
{
"data": [{
"id": "MG"
}]
},
{
"data": [{
"id": "MW"
}]
},
{
"data": [{
"id": "ML"
}]
},
{
"data": [{
"id": "MR"
}]
},
{
"data": [{
"id": "MU"
}]
},
{
"data": [{
"id": "MA"
}]
},
{
"data": [{
"id": "MZ"
}]
},
{
"data": [{
"id": "NA"
}]
},
{
"data": [{
"id": "NE"
}]
},
{
"data": [{
"id": "NG"
}]
},
{
"data": [{
"id": "CG"
}]
},
{
"data": [{
"id": "RE"
}]
},
{
"data": [{
"id": "RW"
}]
},
{
"data": [{
"id": "SH"
}]
},
{
"data": [{
"id": "ST"
}]
},
{
"data": [{
"id": "SN"
}]
},
{
"data": [{
"id": "SC"
}]
},
{
"data": [{
"id": "SL"
}]
},
{
"data": [{
"id": "SO"
}]
},
{
"data": [{
"id": "ZA"
}]
},
{
"data": [{
"id": "SS"
}]
},
{
"data": [{
"id": "SD"
}]
},
{
"data": [{
"id": "SZ"
}]
},
{
"data": [{
"id": "TZ"
}]
},
{
"data": [{
"id": "TG"
}]
},
{
"data": [{
"id": "TN"
}]
},
{
"data": [{
"id": "UG"
}]
},
{
"data": [{
"id": "EH"
}]
},
{
"data": [{
"id": "YT"
}]
},
{
"data": [{
"id": "ZM"
}]
},
{
"data": [{
"id": "ZW"
}]
},
{
"data": [{
"id": "TD"
}]
}
];
var excludedCountries = ["AQ"];
groupData.forEach(function(group) {
var series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
var includedCountries = [];
group.data.forEach(function(country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
series.include = includedCountries;
series.fill = am4core.color("#fff");
series.setStateOnChildren = true;
var seriesHoverState = series.states.create("hover");
var mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("#fff");
mapPolygonTemplate.fillOpacity = 1;
mapPolygonTemplate.nonScalingStroke = false;
mapPolygonTemplate.stroke = am4core.color("#878787");
mapPolygonTemplate.strokeWidth = 0.2;
mapPolygonTemplate.strokeOpacity = 0.5;
mapPolygonTemplate.tooltipText = "{name}";
mapPolygonTemplate.events.on("hit", function(ev) {
ev.target.series.chart.url = "{url}";
});
var hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#a3cc88");
series.data = JSON.parse(JSON.stringify(group.data));
});
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;
worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0; html body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
height: 90vh;
width: 100vh;
border: solid #000 1px;
} <div id="chartdiv"></div>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> Ответ №1:
Вы можете использовать поля свойств для ссылки на URL в ваших данных, как в mapPolygonTemplate.propertyFields.url = "url"; .
Пожалуйста, проверьте рабочий пример ниже:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldUltra;
chart.projection = new am4maps.projections.Miller();
chart.zoomControl = new am4maps.ZoomControl();
var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
longitude: 16.5,
latitude: 3.8
};
var groupData = [{
"data": [{
"id": "DZ",
"url": "https://en.wikipedia.org/wiki/Algeria"
}]
},
{
"data": [{
"id": "AO"
}]
},
{
"data": [{
"id": "BJ"
}]
},
{
"data": [{
"id": "BW"
}]
},
{
"data": [{
"id": "BF"
}]
},
{
"data": [{
"id": "BI"
}]
},
{
"data": [{
"id": "CM"
}]
},
{
"data": [{
"id": "CV"
}]
},
{
"data": [{
"id": "CF"
}]
},
{
"data": [{
"id": "KM"
}]
},
{
"data": [{
"id": "CD"
}]
},
{
"data": [{
"id": "DJ"
}]
},
{
"data": [{
"id": "EG"
}]
},
{
"data": [{
"id": "GQ"
}]
},
{
"data": [{
"id": "ER"
}]
},
{
"data": [{
"id": "ET"
}]
},
{
"data": [{
"id": "GA"
}]
},
{
"data": [{
"id": "GM"
}]
},
{
"data": [{
"id": "GH"
}]
},
{
"data": [{
"id": "GN"
}]
},
{
"data": [{
"id": "GW"
}]
},
{
"data": [{
"id": "CI"
}]
},
{
"data": [{
"id": "KE"
}]
},
{
"data": [{
"id": "LS"
}]
},
{
"data": [{
"id": "LR"
}]
},
{
"data": [{
"id": "LY"
}]
},
{
"data": [{
"id": "MG"
}]
},
{
"data": [{
"id": "MW"
}]
},
{
"data": [{
"id": "ML"
}]
},
{
"data": [{
"id": "MR"
}]
},
{
"data": [{
"id": "MU"
}]
},
{
"data": [{
"id": "MA"
}]
},
{
"data": [{
"id": "MZ"
}]
},
{
"data": [{
"id": "NA"
}]
},
{
"data": [{
"id": "NE"
}]
},
{
"data": [{
"id": "NG"
}]
},
{
"data": [{
"id": "CG"
}]
},
{
"data": [{
"id": "RE"
}]
},
{
"data": [{
"id": "RW"
}]
},
{
"data": [{
"id": "SH"
}]
},
{
"data": [{
"id": "ST"
}]
},
{
"data": [{
"id": "SN"
}]
},
{
"data": [{
"id": "SC"
}]
},
{
"data": [{
"id": "SL"
}]
},
{
"data": [{
"id": "SO"
}]
},
{
"data": [{
"id": "ZA"
}]
},
{
"data": [{
"id": "SS"
}]
},
{
"data": [{
"id": "SD"
}]
},
{
"data": [{
"id": "SZ"
}]
},
{
"data": [{
"id": "TZ"
}]
},
{
"data": [{
"id": "TG"
}]
},
{
"data": [{
"id": "TN"
}]
},
{
"data": [{
"id": "UG"
}]
},
{
"data": [{
"id": "EH"
}]
},
{
"data": [{
"id": "YT"
}]
},
{
"data": [{
"id": "ZM"
}]
},
{
"data": [{
"id": "ZW"
}]
},
{
"data": [{
"id": "TD"
}]
}
];
var excludedCountries = ["AQ"];
groupData.forEach(function(group) {
var series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
var includedCountries = [];
group.data.forEach(function(country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
series.include = includedCountries;
series.fill = am4core.color("#fff");
series.setStateOnChildren = true;
var seriesHoverState = series.states.create("hover");
var mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("#fff");
mapPolygonTemplate.fillOpacity = 1;
mapPolygonTemplate.nonScalingStroke = false;
mapPolygonTemplate.stroke = am4core.color("#878787");
mapPolygonTemplate.strokeWidth = 0.2;
mapPolygonTemplate.strokeOpacity = 0.5;
mapPolygonTemplate.tooltipText = "{name}";
mapPolygonTemplate.propertyFields.url = "url";
// mapPolygonTemplate.urlTarget = "_blank";
// mapPolygonTemplate.events.on("hit", function(ev) {
// ev.target.series.chart.url = "{url}";
// });
var hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#a3cc88");
series.data = JSON.parse(JSON.stringify(group.data));
});
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;
worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0; html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
height: 90vh;
width: 100vh;
border: solid #000 1px;
} <div id="chartdiv"></div>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>