Начало работы с amcharts

Download amcharts eBook

замечания

amCharts - это набор библиотек визуализации данных на основе JavaScript, который включает в себя регулярные типы диаграмм, такие как Serial, Pie и т. д., а также расширенные, такие как карты акций и карты.

вступление

Прежде чем вы сможете использовать amCharts, вам нужно будет указать необходимые библиотеки JavaScript.

Существует одна основная библиотека, необходимая для всех операций amCharts - amcharts.js . Он должен быть включен первым и является обязательным.

Каждый тип диаграммы требует специфического типа диаграммы. Например, для последовательной диаграммы также потребуется serial.js , для круговой диаграммы понадобятся pie.js и т. Д.

Если на одной и той же веб-странице вы будете отображать несколько разных типов диаграмм, вам нужно будет включить все включенные в диаграмму типы, которые отображаются на этой странице.

Дополнительно включает

Помимо основного требуемого функционала, вам могут потребоваться другие функции, такие как темы и плагины. Они находятся в / themes / и / plugins / sub-directories соответственно.

То есть:

<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/plugins/dataloader/dataloader.min.js"></script>
 

Создание диаграммы

Диаграмма состоит из контейнера HTML и кода JavaScript, который создает в нем диаграмму.

HTML

Мы используем элемент <div> качестве контейнера диаграммы.

<div id="chartdiv" style="height: 300px;"></div>
 

JavaScript

Чтобы создать экземпляр диаграммы, мы используем AmCharts.makeChart() . Первый параметр - это идентификатор контейнера для размещения диаграммы, второй - объект с конфигурацией диаграммы.

По крайней мере, он должен содержать параметр type , который содержит тип диаграммы.

<div id="chartdiv" style="height: 300px;"></div>
 

Загрузка с amCharts CDN

AmCharts обеспечивает сбалансированный по нагрузке и надежный CDN для загрузки библиотек непосредственно с нашего веб-сервера. Используйте https://www.amcharts.com/lib/3/ в качестве базового URL для включений.

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
 

Загрузка библиотек с вашего собственного сервера

Для этого [скачать] [1] требуется ZIP-архив amCharts.

Распакуйте его и поместите где-нибудь на свой веб-сервер. Т.е. в / amcharts / подкаталог.

Затем просто загрузите их с помощью тегов <script> :

<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>
 

Stats

27 Contributors: 3
Tuesday, September 13, 2016
Лицензировано согласно: CC-BY-SA

Не связан с Stack Overflow
Rip Tutorial: info@zzzprojects.com

Скачать книгу