Как включить amCharts в HTML-страницу
Я изо всех сил пытаюсь развернуть amCharts на моей пользовательской веб-странице. Ниже приведена моя HTML-страница, на которой я пытался подключить amCharts, но безуспешно. Удивительно, но когда я открываю HTML-файл в Chrome, я вижу пустую страницу. Любой указатель на то, что мне не хватает, будет очень признателен.
<html>
<head>
<script src = "https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src = "https://www.amcharts.com/lib/3/serial.js"></script>
<script src = "https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src = "https://www.amcharts.com/lib/3/lang/ru.js"></script>
</head>
<body>
<div id = "chartdiv"></div>
<style type = "text/css">
#chartdiv {
width: 100%;
height: 400px;
}
</style>
<script type = "text/javascript">
var chartData = [{
"date": "2013-01-01",
"value": 60
}, {
"date": "2013-01-02",
"value": 67
}, {
"date": "2013-01-03",
"value": 64
}, {
"date": "2013-01-04",
"value": 66
}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value"
}],
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
"dataProvider": chartData
});
</script>
</body>
</html>
@Teemu - изменил мой код, но на странице все еще нет отображения
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Есть две проблемы
1) Как упоминалось в @Teemu, вы хотите либо поместить тег скрипта после #chartdiv, либо обернуть вызов makeChart в событие onload, которое выполняется после загрузки документа.
2) AmCharts требует, чтобы вы указали размеры для #chartdiv в CSS, например
<style type = "text/css">
#chartdiv {
width: 100%;
height: 400px;
}
</style>
Привет, xorspark, спасибо. Я изменил код на основе вашего предложения относительно CSS. Теперь он работает нормально.
Удивительно, но я вижу, когда я развертываю свою страницу на сервере (включая локальный сервер, например, локальный: 8888 / page.html), amChart не отображается. (удален, следовательно, тег как полный). Я не уверен, требуются ли дополнительные настройки?
О, я вижу, что виноват плагин под названием Privacy-Badger. Отключил это, и теперь он работает нормально
Сценарий в разделе заголовка выполняется до того, как
#chartdivсуществует. Взгляните на консоль, возможно, вас ждет сообщение об ошибке.