Создание компонента диаграммы с помощью Angular 2 и FusionCharts

Структурирование данных.

Поэтому нам нужно подумать о том, как структурировать наши данные таким образом, чтобы мы могли определять разные наборы данных для разных лет. Как упоминалось ранее, FusionCharts ожидает, что параметры конфигурации будут содержать свойство {
"type": "column2d",
...
"dataSource": {
"chart": {},
"data": [
{
"label": "whatever",
"value": "a value"
}
]
}
}


 dataSet

Одним из способов обработки нескольких наборов данных было бы определение объекта var chartComp= this;
chartComp.dataSet = {
"2014": [{
"label": "Amazon",
"value": "88.99"
}, {
"label": "Apple",
"value": "182.8"
}, {
"label": "Facebook",
"value": "12.47"
}, {
"label": "Google",
"value": "65.67"
}, {
"label": "Microsoft",
"value": "86.83"
}],
"2015": [{
"label": "Amazon",
"value": "107.01"
}, {
"label": "Apple",
"value": "233.72"
}, {
"label": "Facebook",
"value": "17.93"
}, {
"label": "Google",
"value": "74.54"
}, {
"label": "Microsoft",
"value": "93.58"
}]
}


 "data": chartComp.dataSet['2014'],

Затем в опциях конфигурации мы переходим к конструктору FusionCharts, мы можем сделать:

 <div class="container">
  <h1>Revenue of Top Tech-companies</h1>

  <div class="actions">
    <button (click)="yearChange(2014)"
            [ngClass] = "{selected: selectedYear== 2014}">2014
    </button>
    <button (click)="yearChange(2015)"
            [ngClass] = "{selected: selectedYear== 2015}">2015
    </button>
  </div>
  <div id ="chart-container"></div>
</div>

Обновление данных диаграммы при переключении

Мы также хотим, чтобы график обновлялся данными за 2015 год, как только кто-то нажмет кнопку 2015 года и вернется к отображению данных за 2014 год, когда нажата кнопка 2014 года .

Давайте добавим две кнопки, которые будут использоваться для выполнения этого действия, и придадим им стиль . Изменить шаблон компонента следующим образом:

 ngClass

Обратите внимание на новый синтаксис для добавления прослушивателя событий и добавления директивы ngClass в Angular 2. Они почти такие же, как Angular 1, за исключением некоторых скобок и скобок.

Я добавил директиву selectedselectedYear Это основано на свойстве chartComp.selectedYear = 2014;


Мы можем установить текущий выбранный год на 2014, когда компонент рендерится, добавив следующую строку в верхнюю часть конструктора:

 yearChange

Логика для обработки нажатий кнопок будет добавлена ​​в новую функцию .Class({
constructor: function(){ ... },
yearChange: function(){ // button logic here }
);


 getChartData

Для этого мы будем использовать метод setChartData FusionChart, который требует как параметров конфигурации диаграммы, так и фактических данных диаграммы. Вместо того, чтобы сначала сохранять атрибуты диаграммы, а затем ссылаться на них, мы получим атрибуты диаграммы из уже отрисованной диаграммы, используя метод yearChange: function(year) {
var revenueChart = FusionCharts.items['revenue-chart'];
var chartJson = revenueChart.getChartData('json');
chartJson.data = this.dataSet[year];
revenueChart.setChartData(chartJson);
this.selectedYear = year;
}


 dataSet

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

демонстрация

И вот последняя демонстрация.

Вы можете просмотреть код для этой демонстрации на Plunker . Или вы можете скачать код из нашего репозитория GitHub .

Если вы перейдете к Plunker, вы увидите, что мы непосредственно определили свойство dataSet в файле config.json . Это делает вещи намного аккуратнее в нашем компоненте.

Заключение и последующие шаги

Мы начали с создания простой угловой диаграммы, а затем добавили к ней больше функциональности, используя аннотации и другие API FusionCharts. Но это только вершина айсберга, и многое другое можно сделать с помощью Angular 2 и FusionCharts. Некоторые вещи, которые вы можете изучить самостоятельно:

• Включите больше диаграмм. Столбчатая диаграмма — не всегда лучший способ представления набора данных. В зависимости от вашего варианта использования вы можете использовать разные диаграммы, такие как водопад, радар, манометр и т. Д. Поэтому попробуйте использовать процесс, описанный в этом руководстве, чтобы построить другую диаграмму и посмотреть, сможете ли вы сделать это успешно.

• Включите диаграммы в свое приложение. Если вы занимаетесь созданием гибридных мобильных приложений, вы должны знать, что Ionic 2 (последняя версия Ionic) основана на Angular 2. И это хорошая новость, поскольку вы можете использовать это руководство в качестве основы для создавать диаграммы для ваших приложений Ionic, а также.

• Узнайте больше о событиях: в этом руководстве я объяснил, как использовать метод setChartDataсобытий и методов , которые можно использовать для улучшения взаимодействия с пользователем вашего приложения. Посетите вышеуказанные ссылки, чтобы узнать больше о различных событиях и методах, предлагаемых FusionCharts.

Если вы столкнулись с какими-либо трудностями при попытке составить диаграммы самостоятельно, обратитесь к документации Angular или FusionCharts (в зависимости от проблемы) или просто оставьте комментарий ниже. Я буду более чем рад помочь!