Автор оригинала: Jonathan Pereira.
Ember.js – это относительно новый JavaScript на основе интерфейса, которая является широко распространенной популярностью, потому что она помогает разработчикам создавать веб-сайты с богатыми и сложными взаимодействиями пользователя, в то время как умело управлять сложностью.
Рамки с открытым исходным кодом также поставляются с интегрированным инструментом разработки, которые обеспечивают быстрые итерации развития. Эмберские проекты создаются и управляются через командную строку Build Tool Ember CLI.
Ключевые особенности Ember.js
Emberjs реализует архитектуру контроллера представления модели (MVC) для приложения; Структура автоматически генерируется каждый раз, когда появляется новое приложение Emberjs, используя CLI.
Emberjs включает в себя широко следовавшие идиомы программирования и лучшие практики, что позволяет разработчикам придумать масштабируемые одностраничные веб-приложения.
Хотя он был в первую очередь, в первую очередь разработан для веб-сайта, Emberjs также можно использовать для создания мобильных и настольных приложений.
Emberjs имеет сменутую архитектуру, которая способствует повышению и расширению возможностей структуры.
Рамки Emberjs поддерживают обратную совместимость, даже когда она продолжает развиваться.
Основные понятия, связанные с Ember.js
Маршруты – В Ember URL используется для представления состояния приложения. Объект маршрута, соответствующий каждому URL, используется для контроля того, что видно для пользователя. Маршруты полезны для перенаправления к нескольким шаблонам маршрута в том же приложении, ударяя URL-адрес, добавление имен маршрутов.
Модели – модель содержит данные о состоянии приложения. Каждая модель связана с маршрутом.
Шаблоны – Чтобы облегчить настройку и настройку архитектуры MVC, Emberjs поставляется с шаблонами, написанными на рулях, которые помогают определить, как выглядит пользовательский интерфейс.
Компоненты – Компонент контролирует поведение пользовательского интерфейса и состоит из двух частей:
HBS – шаблон, который определяет интернет-интерфейс страницы
Контроллер – исходный файл, написанный в JavaScript, который определяет поведение UI
В этой статье мы используем компоненты для изменения диаграммы, которая отображается в файле шаблона пользовательского интерфейса. Эти компоненты также могут быть использованы для визуализации пользовательского интерфейса в других шаблонах.
Fusioncharts JavaScript Charting Библиотека
Fusioncharts suite xt Это решение Charting на основе JavaScript, которое работает на рабочем столе и мобильных платформах. Различные диаграммы и карты, являющиеся частью библиотеки Charting в упрощении анализа данных и визуализации данных. Библиотека также включает в себя несколько базовых и расширенных параметров конфигурации, которые помогают добавить значение для отображения данных.
Предпосылки
Прежде чем мы продолжим видеть, как вы можете интегрировать Fusioncharts с приложением Emberjs, вам нужно: * Иметь базовое понимание модели объекта HTML, CSS, JavaScript и Document (DOM) * Скачать и Установить Nodejs (NPM) Использовать интерфейс командной строки (CLI) * Установите EMBER CLI через NPM (данные установки на шагах ниже) * Скачать Fusioncharts.
Создание диаграмм в Ember.js с использованием Fusioncharts
Шаг 1 Установите Nodejs (если не установлено уже)
Шаг 2 Установите Ember CLI.
Сделать это:
Перейдите в каталог, в котором вы хотите настроить свой проект.
Выполните следующую команду из командной строки: NPM Установить -G Ember -Cli
После успешной установки Emberjs используйте следующую команду для проверки деталей версии: эмбер -v.
Шаг 3 Создайте новый проект Ember, названный тестированием, используя следующую команду:
Эмбер Новый тестер
Когда проект создан, структура файлов для проекта EMBER автоматически генерируется в рабочем каталоге.
Шаг 4 Запустите проект.
Чтобы начать запустить проект:
Запустите сервер, используя следующую команду: Эмбер подаю
Введите URL Localhost: 4200 в вашем браузере (потому что 4200 – это порт по умолчанию используется).
Шаг 5 Установите Fusioncharts через NPM в каталоге проекта тестирования, используя следующую команду: NPM установить fusioncharts
Папка Node_Modules теперь будет иметь все библиотеку Fusioncharts в нем.
Шаг 6 Включите необходимые файлы JavaScript из Node_Modules в проект тестирования.
Для этого включите следующие отчетности импорта в файле Ember-Cli-Build.js:
app.import("node_modules/fusioncharts/fusioncharts.js");
app.import("node_modules/fusioncharts/fusioncharts.charts.js");
app.import("node_modules/fusioncharts/themes/fusioncharts.theme.zune.js");
Шаг 7 Создайте маршруты в проекте тестирования.
Для генерации «маршрута» в проекте тестирования используйте следующую команду:
EMBER G Chartlist маршрута/Chart2 Это создаст файл маршрута, Chart2.js, под структурой папки маршрутов. Кроме того, файл шаблона, Chart2.hbs, также создается в структуре папки шаблонов.
Файл .js – это файл обработчика маршрута, который определяет, что должно произойти, когда загружен шаблон маршрута.
Файл .hbs – это файл шаблона руль, который содержит статический HTML для генерации пользовательского интерфейса приложения и динамического контента (сценариев) для визуализации диаграмм с использованием Fusioncharts. Нажмите здесь, чтобы узнать больше о рулях.
Шаг 8 Создайте компонент для проекта тестирования, используя следующую команду:
Ember G Компонент Chart2-Comp После выполнения вышеуказанной команды структура каталога проекта тестирования будет изменена, чтобы включить компоненты.
Шаг 9 Определите UI и его поведение.
Изображение ниже показывает предполагаемую визуализацию UI для этого образца:
Исходя из этой визуализации, вам нужно:
Создавайте диаграммы и кнопку, соответствующие каждому графику. Нажмите кнопку, чтобы сделать график.
Укажите текстовую область, где пользователь может ввести источник данных для пользовательской графики. Добавьте кнопку, чтобы сделать график при нажатии.
Чтобы определить этот интерфейс, скопируйте следующий код и вставьте его в файл Chart2-Comp.hbs:
Когда вы нажимаете кнопку для типа диаграммы, соответствующий график отобразится на основе действий, определенных в файле Chart2-Comp.js в папке приложений/компонентов.
Точно так же, когда нажатие источника данных введено в поле текстового пространства, и соответствующая кнопка нажата, источник данных выбирается и передается в файл Chart2-Comp.js через действие, указанное для кнопки.
Чтобы определить это поведение UI, скопируйте следующий код и вставьте его в файл Chart2-Comp.js:
import Ember from 'ember';
var revenueChart1;
var initial_ds =
{
"chart": {
"caption": "Worlds Top 10 Highest paid",
"subCaption": "Soccer Players 2017",
"yAxisName": "Earnings (In USD)",
"numberPrefix": "$",
//Cosmetics
"captionpadding": "30",
"yaxisname": "Estimated fans",
"rotatevalues": "0",
"divlinecolor": "#CCCCCC",
"yaxisvaluespadding": "15",
"valuefontbold": "1",
"labelsepchar": ": ",
"labeldisplay": "AUTO",
"numberscalevalue": "1000,1000,1000",
"numberscaleunit": "K,M,B",
"animation": "0",
"palettecolors": "e44a00",
"theme": "zune",
"valueBgAlpha": "0",
"usePlotGradientColor": "0"
},
"data": [
{
"label": "CR7",
"value": "93000000",
"alpha": "100"
},
{
"label": "Messi",
"value": "80000000",
"alpha": "85"
},
{
"label": "Neymar",
"value": "37000000",
"alpha": "75"
},
{
"label": "Gareth{br}Bale",
"value": "34000000",
"alpha": "65"
},
{
"label": "Zlatan{br}Ibrhimovic",
"value": "32000000",
"alpha": "56"
},
{
"label": "Wayne{br}Rooney",
"value": "23600000",
"alpha": "50"
},
{
"label": "Luis Suarez",
"value": "23300000",
"alpha": "45"
},
{
"label": "Sergio{br}Aguero",
"value": "13700000",
"alpha": "35"
},
{
"label": "James{br}Rodriguez",
"value": "29100000",
"alpha": "30"
},
{
"label": "Paul{br}Pogba",
"value": "21200000",
"alpha": "20"
}
]
};
export default Ember.Component.extend({
actions: {
renderChart: function() {
var ds = this.get('myds');
revenueChart1.setJSONData(ds);
},
renderColumn: function() {
FusionCharts.ready(function() {
revenueChart1 = new FusionCharts({
"type": "column2d",
"width": "800",
"height": "350",
"renderAt": "chart-container",
"dataFormat": "json",
"dataSource": initial_ds
}).render();
});
},
renderBar: function() {
FusionCharts.ready(function() {
revenueChart1 = new FusionCharts({
"type": "bar2d",
"width": "800",
"height": "350",
"renderAt": "chart-container",
"dataFormat": "json",
"dataSource": initial_ds
}).render();
});
},
renderLine: function() {
FusionCharts.ready(function() {
revenueChart1 = new FusionCharts({
"type": "line",
"width": "800",
"height": "350",
"renderAt": "chart-container",
"dataFormat": "json",
"dataSource": initial_ds
}).render();
});
},
renderArea: function() {
FusionCharts.ready(function() {
revenueChart1 = new FusionCharts({
"type": "area2d",
"width": "800",
"height": "350",
"renderAt": "chart-container",
"dataFormat": "json",
"dataSource": initial_ds
}).render();
});
}
}
});
Примечание: Действия для кнопок должны быть определены в компонентном файле (Chart2-Comp.js). Это можно увидеть на изображении выше. Имя компонента должно иметь дефис (-) в нем. Это номенклатура, за которой следует EMBER, чтобы определить компонент.
Шаг 10 Компоненты, когда-то созданные, можно повторно использовать в нескольких разных шаблонах. Мы включаем компонент, созданный выше в шаблоне маршрутов, созданный на шаге 7.
Для этого добавьте следующий код в файл Chart2.hbs: {{Chart2-Comp}}
Шаг 11 Сохраните все файлы и запустите проект.
Чтобы запустить проект:
Запустите сервер, используя следующую команду: Эмбер подаю
Введите URL Localhost: 4200 в вашем браузере (потому что 4200 – это порт по умолчанию используется).
Затем нажмите URL – Localhost: 4200/Chartlist/Chart2
Выход
Ваш выход должен выглядеть так, как видно на изображении ниже: Если вы внимательно следите за ступенями, вы получите вывод, как показано выше. Если вы все еще сталкиваетесь с проблемами, вы можете Просмотр исходного кода Отказ
Устранение неполадок: Если вы не можете увидеть диаграмму, убедитесь, что: * ID диаграммы уникален для всех диаграмм, отображаемых на той же странице, либо приведет к ошибке JavaScript. * Fusioncharts.js и другие связанные файлы библиотеки включены должным образом (особенно если график не отображается вообще) * Путь к включенным файлам правильно, и файлы находятся там * Имена псевдонимов диаграммы правильно написаны.
Этот пост впервые появился в Fusioncharts blog. !