Jak vytvářet grafy v Angular

Je velmi snadné se ztratit v záplavě JavaScriptových frameworků a knihoven, ze kterých si jako front-end vývojáři musíme v dnešní době vybírat. Každý týden se objeví nový rámec, který vás vrátí zpět na srovnávací tabuli, takže váš úkol vybrat ten správný je mimořádně obtížný. Ani nevíte, že ta nová nablýskaná věc, která dnes vypadá skvěle, přežije i příštích šest měsíců.

Ale pokud existuje jeden rámec, který si v průběhu času vedl konzistentně dobře, musí to být Angular. Je podporována některými z největších společností a určitě tu zůstane.

Dnes vám tedy dám návod, jak vizualizovat data pomocí Angular – něco, co by měl znát každý vývojář. Naučíme se vytvářet krásné grafy pomocí Angular, FusionCharts a jejich pluginu Angular charts.

Část 1:Vytvoření prvního grafu v Angular

Celý proces jsem rozdělil do čtyř snadno pochopitelných kroků. To je to, co děláme (můžete vidět živou verzi zde a GitHub repo najdete zde):

Krok 1:Zahrňte požadované soubory JavaScript

Náš projekt je závislý na následujících třech souborech:

  • Základní knihovna AngularJS:bude fungovat jakákoli minifikovaná verze 1.x.
  • Soubory s grafy JS společnosti FusionCharts:stáhněte si je odtud.
  • Plugin Angular charts:stáhněte si jej odtud.

V základním balíčku FusionCharts musíme zahrnout oba fusioncharts.js a fusioncharts.charts.js přítomen ve složce JS.

Všechny výše uvedené soubory zahrneme pomocí HTML <script> tagy:

<!-- AngularJS library -->
<script type="text/javascript" src="angular.min.js"></script>

<!-- FusionCharts library-->
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>

<!-- Angular plugin -->
<script type="text/javascript" src="angular-fusioncharts.min.js"></script>

Krok-2:Vytvořte aplikaci AngularJS

Dále musíme vytvořit aplikaci Angular a vložit ng-fusioncharts module, což je plugin, který používáme. Děláme to takto:

var app = angular.module('chartApp', ['ng-fusioncharts']);

Krok-3:Definujte ovladač

V tomto kroku definujeme ovladač pro naši aplikaci. Za tímto účelem rozšiřujeme rozsah kontroléru o zdroj dat a další konfigurace grafu pro náš graf:

app.controller('MyController', function($scope) {
  // chart data source
  $scope.dataSource = {
    "chart": {
      "caption": "Column Chart Built in Angular!",
      "captionFontSize": "30",
      // more chart properties - explained later
    },
    "data": [{
        "label": "CornflowerBlue",
        "value": "42"
      }, //more chart data
    ]
  };
});

$scope.dataSource ve výše uvedeném úryvku kódu bude veškerý obsah související s naším grafem – v našem případě konfigurace grafu a data grafu. Pro jiné typy grafů může obsahovat i jiné věci.

Mnoho konfigurací lze provést pomocí chart objekt, ale nepokrývám to zde, protože není nutné vykreslit základní graf. Můžete přejít na poslední sekci – „Vylepšení designu“ – a dozvědět se o ní více.

Krok-4:Vykreslení grafu

Už jsme skoro hotovi. Chcete-li graf vykreslit, přidejte fusioncharts direktiva uvnitř <div> kde chcete graf vykreslit. Děláme to takto:

<div ng-controller="MyController">
    <fusioncharts 
        width= "100%"
        height= "400"
        type= "column2d"
        dataFormat= "json"
        dataSource= "{{dataSource}}">
    </fusioncharts>
</div>

Ve výše uvedeném kódu jsme použili:

  • width a height pro nastavení velikosti grafu. Šířka 100 % způsobí, že graf zabere celou šířku kontejneru a bude reagovat.
  • type pro nastavení typu grafu. Alias ​​pro graf, který chcete vykreslit, najdete na této stránce seznamu grafů.
  • dataFormat k definování formátu dat, který budeme používat k podávání dat.
  • dataSource k definování obsahu pro náš graf (další podrobnosti viz krok 3).

Část 2:Obsluha událostí

Vykreslování grafů, které vypadají dobře, je jedna věc, ale aby byly skutečně interaktivní, potřebujete nějaký způsob, jak události zvládnout. Dobře, FusionCharts usnadnil přidávání různých událostí do svých žebříčků. Zpracování událostí je samo o sobě velké téma a mým cílem je poskytnout vám základní přehled. Pomůže vám vybudovat pevný základ, takže další průzkum bude o něco jednodušší.

V tomto příkladu použiji dataPlotClick událost. Datový graf odkazuje na sloupec ve sloupcovém grafu nebo čáru ve spojnicovém grafu. dataPlotClick se spustí, když někdo klikne na graf dat. V našem případě, kdykoli někdo klikne na sloupec, zobrazíme pod grafem barvu sloupce, na který klikl.

<div class="statusbar" style="{{ colorValue }}">{{ selectedValue }}</div>
$scope.selectedValue = "Please click on a column";
$scope.events = {
  dataplotclick: function(ev, props) {
    $scope.$apply(function() {
      $scope.colorValue = "background-color:" + props.categoryLabel + ";";
      $scope.selectedValue = "You clicked on: " + props.categoryLabel;
    });
  }
};

Obsluha události obdrží ev a props jako jeho argumenty:

  • ev obsahuje podrobnosti související s událostí – typ události, ID události atd.
  • props obsahuje podrobnosti o konkrétním datovém grafu, na kterém k události došlo. V našem případě bude mít popisek, hodnotu atd. sloupce, na který se kliklo.

Extrahujeme a předáme popisek sloupce, na který jsme klikli, pomocí props.categoryLabel . Pomocí této hodnoty pak změníme barvu textu a pozadí.

Chcete-li prozkoumat více o událostech, navštivte tuto referenční stránku API. Má dobrý popis a funkční demo JSFiddle pro každou událost.

Část 3:Zlepšení designu

I když jsem chtěl studovat design, nikdy jsem tomu nevěnoval čas. A když teď musím navrhnout stránku nebo jakoukoli aplikaci, na které pracuji, používám jen svůj pocit, ale odbočím. Když se tedy dostáváme k našim úhlovým grafům, existuje mnoho, co můžete udělat pro zlepšení vzhledu a chování vašich grafů pomocí něčeho, co se nazývá atributy grafu.

Existují stovky věcí, které si můžete pro graf přizpůsobit. Můžete například použít baseFont změnit rodinu písem vašeho grafu. Můžete použít bgColor změnit barvu pozadí grafu.

Můžu o tom pokračovat dál a dál, ale nic to nezmění. Nejlepší je uložit si výše odkazovanou stránku do záložek a jednoduše vyhledat typ grafu, který vytváříte. Ať už si o přizpůsobení v grafu myslíte cokoli, pravděpodobně pro to najdete atribut.

Máte nějaké otázky? K tomu slouží sekce komentářů;) Klidně se ptejte. Rád vám pomohu!