Этот учебник основан на Часы офиса кодамента С Антоном Селином, который поделился своими знаниями о интеграке и использовании библиотеки AmCharts с угловыми 2 каркасами. Антон – старший разработчик с обширным опытом в области веб-разработки и архитектуры предприятия.
Функциональные возможности AmCharts API позволяют нам пропускать параметры и настроить внутренние внутренние в двигатель рендеринга диаграммы. И в некотором смысле, AmCharts, как черный ящик, который дает нам гибкость с точки зрения настроек (хотя мы не можем напрямую допустить, как оно делает график). Сайт AmCharts Обеспечивает более подробную информацию о технологии.
Но прежде чем мы начнем с этого учебника AmCharts, давайте сначала установим среду настройки.
Предпосылки
Прежде всего, нам нужно примерное приложение, поэтому мы можем внести среду для реализации библиотеки AmCharts. Для этой цели не стесняйтесь скачать Angular 2 приложение из официального NG Сайт и также доступен на Github Отказ
После загрузки приложения нам нужно запустить команду установки NPM, которая будет вытащить все пакеты, необходимые для нашего приложения. Эти пакеты описаны в файле package.json в корне нашего приложения. Поскольку NG2 все еще находится в разработке, версии пакетов могут измениться, поэтому убедитесь, что наш файл package.json имеет следующие зависимости с соответствующей версией пакета:
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
},
Теперь откройте CMD и запустите NPM установить команда (убедитесь, что вы находитесь в корневой папке приложения).
После этого давайте запустим команду START NPM, чтобы запустить Lite Server. Это отслеживает изменения в файлах TepertScript.
Если все установлено правильно, вы должны увидеть пример приложения в вашем браузере:
Теперь давайте создадим папку с именем Charts в папке приложения:
Поскольку наше приложение пустое, нам нужно использовать несколько кнопок в шаблоне компонента приложений. Затем мы реализуем следующие функциональные возможности: когда пользователь нажимает на кнопку, он будет вызывать компонент, содержащий диаграмму и визуализируйте его в роутер-розетке (вы можете найти больше информации о маршрутизаторе-розетке здесь .
Учебник AmCharts: шаги реализации
Начало работы с AmCharts
Как только мы создали нашу среду настройки, теперь вам нужно скачать библиотеку Charting в Скачать страницу Отказ Как только вы дойдете до страницы, выберите JavaScript Charts. Вы должны были загрузить ZIP-файл, который имеет некоторые образцы в папке образцов. Для этого учебника AmCharts выберите Barcustered.html и запустите его в браузере, эта графика должна появиться:
У AmCharts есть две стили конфигурации; Один с объектом JSON, а другой – это конфигурация через API библиотеки (JavaScript). В основном, объект JSON наиболее удобным в тех случаях, когда вы хотите настроить свой график на сервере, в противном случае вы должны использовать API для настройки вашего графика. Пример, который мы видим выше, устанавливаются через API JavaScript объекта AmCharts.
В конце кода мы можем увидеть звонок для записи функции. WRITE – это команда, передаваемая в двигатель рендеринга, указывающий меток DIV, где мы хотим, чтобы диаграмма была выполнена.
Итак, теперь позволяет создавать два файла в папке диаграмм, которая будет содержать логику и шаблон для нашей графики (.js и .js.map файлы, генерируемые по тиражему компилятору):
Теперь поместите следующий код в файл .ts:
///import {Component, AfterViewInit} from '@angular/core'; @Component({ selector: 'bar-clustered', templateUrl: 'app/charts/BarClustered.component.html' }) export class BarClusteredComponent implements AfterViewInit{ constructor() {} ngAfterViewInit() { var chart: any; var chartData = [ { "year": 2005, "income": 23.5, "expenses": 18.1 }, { "year": 2006, "income": 26.2, "expenses": 22.8 }, { "year": 2007, "income": 30.1, "expenses": 23.9 }, { "year": 2008, "income": 29.5, "expenses": 25.1 }, { "year": 2009, "income": 24.6, "expenses": 25 } ]; if (AmCharts.isReady) { createChart(); } else { AmCharts.ready(function () { createChart(); }); } function createChart() { // SERIAL CHART chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "year"; chart.startDuration = 1; chart.plotAreaBorderColor = "#DADADA"; chart.plotAreaBorderAlpha = 1; // this single line makes the chart a bar chart chart.rotate = true; // AXES // Category var categoryAxis = chart.categoryAxis; categoryAxis.gridPosition = "start"; categoryAxis.gridAlpha = 0.1; categoryAxis.axisAlpha = 0; // Value var valueAxis = new AmCharts.ValueAxis(); valueAxis.axisAlpha = 0; valueAxis.gridAlpha = 0.1; valueAxis.position = "top"; chart.addValueAxis(valueAxis); // GRAPHS // first graph var graph1 = new AmCharts.AmGraph(); graph1.type = "column"; graph1.title = "Income"; graph1.valueField = "income"; graph1.balloonText = "Income:[[value]]"; graph1.lineAlpha = 0; graph1.fillColors = "#ADD981"; graph1.fillAlphas = 1; chart.addGraph(graph1); // second graph var graph2 = new AmCharts.AmGraph(); graph2.type = "column"; graph2.title = "Expenses"; graph2.valueField = "expenses"; graph2.balloonText = "Expenses:[[value]]"; graph2.lineAlpha = 0; graph2.fillColors = "#81acd9"; graph2.fillAlphas = 1; chart.addGraph(graph2); // LEGEND var legend = new AmCharts.AmLegend(); chart.addLegend(legend); chart.creditsPosition = "top-right"; // WRITE chart.write("chartdiv"); } } }
И следующий код в файле шаблона:
Hello From Bar Clustered Component
Как видите, мы используем Typings, чтобы извлечь выгоду из помощью функций TypeyScript (которая ясно разработана в этом quora Wass ). Скачать тепты здесь И поместите его в папку «Папка», которая находится в корне нашего приложения:
Теперь, если мы попытаемся запустить команду, чтобы скомпилировать типографские файлы наших папок (NPM RUN TSC) Увидим много ошибок. Решите эти ошибки, перейдете к TSConfig.json и немного изменив код:
Теперь нам нужно изменить несколько amCharts Syper (потому что тексты неполные). Добавьте следующий код в строке 30 файла ввода:
var ready: any; var isReady: any;
Теперь все должно выглядеть хорошо; Давайте продолжим.
Реализация маршрутизации для нашего приложения
Для этого этапа давайте сначала создам новый файл под названием App.Routes.ts для реализации постоянного массива, который будет содержать все маршруты:
import {BarClusteredComponent } from './charts/BarClustered.component';
export const AppRoutes = [
{path: 'charts/barclustered', component: BarClusteredComponent}
];
После этого шага импортируйте поставщика и оформить модули в файле Main.ts:
import { AppRoutes } from './app.routes';
import { provideRouter } from '@angular/router';
И теперь давайте предоставим наши маршруты на приложение:
bootstrap(AppComponent, [
provideRouter(AppRoutes)
]);
Теперь в файле app.component.ts импортирует Router_Directives , который просто предопределенный список директив, мы можем добавить к шаблону компонента.
Давайте добавим <Маршрутизатор-розетка> Тег на шаблон нашего компонента, чтобы загруженные компоненты отображаются соответственно.
Теперь укажите ссылку маршрутов, чтобы мы могли получить доступ к ним, нажав кнопку; Один из простейших способов сделать это:
Если вы не можете следить за потоком разработки или у вас есть некоторые ошибки, проверьте окончательную структуру кода ниже.
Крючки жизненного цикла NG
Если есть ошибка, сказав, что значение для App_base_href Не было предоставлено, нам нужно указать сепаратор пути для нашего маршрутизатора, стандартный – это « »/ ‘(Slash)
Добавьте следующий код в Index.html (до открытия головки):
Теперь есть еще одна ошибка! Но все, кажется, хорошо, что именно происходит? Проблема здесь состоит в том, что маршрутизатор требует маршрута по умолчанию, с пути: ”.
Обычно это будет ваша главная страница или приветственный компонент, но для этого учебника AmCharts давайте создадим пустой компонент.
В папке диаграммы создайте: ettyroute.component.ts Файл и заполните его следующим кодом:
import { Component } from '@angular/core';
@Component({
selector: 'empty-component',
template: `
I'm empty
`
})
export class EmptyRouteComponent { }
А в файле App.routes.ts добавьте пустой маршрут по умолчанию по следующему коду:
import {EmptyRouteComponent } from './charts/EmptyRoute.component';
{path: '', component: EmptyRouteComponent },
Запустите приложение NPM снова с самого начала. Не забудьте запустить команду компилятора, чтобы перекомпилировать файлы .ts в файлы .js (NPM RUN TSC) Отказ
Хорошо, здорово сейчас приложение работает нормально. Итак, давайте нажмем кнопку Cluster Cluster Clustered и посмотрите, что происходит … Больше ошибок? Отель! Что происходит???
Ну, мои друзья, это развитие.
В принципе на этом шаге, когда мы пытаемся активировать компонент (да, это называется активацией) на нашем маршруте, даже когда у нас есть напечатки (это только для Typeycript Transpiler), у нас нет определенных библиотек наших графиков. Давайте проверим в файле образца диаграммы и посмотрите, какие библиотеки нам нужны для этого:
И давайте включаем (исправление пути) эти строки на наш index.html:
Давайте запустим это снова, et voilà Наш график здесь.
ПРИМЕЧАНИЕ. Если по какой-то причине на этом шаге вы получите ошибку, как: Слушайте eeaddrinuse::: 3000, убьют процесс сервера узла и перезапустите компьютер, и все будет хорошо.
Реализация карт с использованием Ammap
Теперь давайте немного поговорим о Ammaps. По сути, процедура почти такая же. Если вы хотите реализовать Ammap в NG2, вы должны выполнить точные игры, что и для учебника AmCharts, описанных выше, с некоторыми небольшими нюансами, которые я укажу.
Скачать страницу Это то же самое, но на этот раз загружайте Ammap. Это содержит весь код, который вам понадобится, а также папка, полная образцов. Напоминание: Не забудьте включить ссылки на страницу индекса к необходимым библиотекам.
При внедрении первого выпуска Ammap вы можете обнаружить, что в теппитии, которые мы использовали в этом учебном пособии AmCharts, не содержат определений для Ammap. На данный момент этого письма я не смог найти какой-либо хороший пример ввода для Ammap, поэтому мое предложение будет напрямую к файлу AmCharts.d.ts и добавлять все определения, необходимые для компилятора TypeyctS (если вы » Перевернулся или не знаю, что делать, вы можете найти полный код для этого примера на этом GitHub Репозиторий.
Спасибо всем и удачи с вашим кодировкой!