Сначала я установил amcharts через npm в своем проекте (asp. net MVC), хотя быстрая установка Visual Studio с использованием
***npm install @ amcharts / amcharts4 npm install @ amcharts / amcharts4-geodata
Установка AmCharts
После установки в моем проекте решения создается папка node_modules со всеми связанными файлами AmChart.
Я написал свой код AmChart в своем проекте, и когда я собираюсь, сборка застревает навсегда. Я не могу собрать свой проект вообще, так как сборка застряла. Итак, я снова удаляю все, используя эти команды
***npm uninstall -g @ amcharts / amcharts4 npm uninstall -g @ amcharts / amcharts4-geodata
Я никогда не использовал npm для установки, но я всегда использовал nuget, и я впервые использую опцию быстрой установки VS для установки через npm.
И после удаления всех пакетов amChart я удаляю node_modules через командную строку, используя
> npm uninstall -g node_modules
и физически удаляю папка node_modules, потому что я все еще не смог собрать. После физического удаления этой папки я получаю много не найденных ошибок (для файлов amchart, которые были в папке node_modules). Я приложил ошибку фото 1031
Как мне разрешить все эти ссылки (не найдено ошибок). Я хотел бы использовать amchart через CDN, а не через npm (потому что у меня много головной боли, так как я не могу собрать после установки).
Я не ссылался ни на один из amcharts из моих локальных файлов, но использовал ссылки CDN, и все же я получаю "не найденные ошибки"
Код ниже
<html>
@section head {
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/worldLow.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 350px;
}
</style>
</head>
}
<body>
<div class="container-fluid">
<div id="countrychartdiv" style="width: 1200px; height: 500px;"></div>
</div>
</body>
</html>
$(document).ready(function () {
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
/* Create map instance */
var chart = am4core.create("countrychartdiv", am4maps.MapChart);
/* Set map definition */
chart.geodata = am4geodata_worldLow;
/* Set projection */
chart.projection = new am4maps.projections.Miller();
/* Create map polygon series */
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
/* Make map load polygon (like country names) data from GeoJSON */
polygonSeries.useGeodata = true;
/* Configure series */
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.events.on("hit", function (ev) {
ev.target.series.chart.zoomToMapObject(ev.target);
});
/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
// Add Western European countries
polygonSeries.exclude = ["AQ"];
chart.zoomControl = new am4maps.ZoomControl();
});