Index

inCharts.js - Dokumentace

---

Knihovna inCharts se skládá z jednotlivých komponentů a globálních statických tříd jádra, které jsou společné pro všechny grafy a obsahují metody pro obecné výpočty a vytváření objektů. Jednotlivé komponenty jsou implementovány vždy jako samostatná třída, jejíž instance je přidružena ke konkrétnímu elementu canvas. Vykreslovací element canvas je vytvořen automaticky při každé konstrukci grafu.

Instalace

Veškerý obsah knihovny je zapouzdřen v objektu „incharts“. Pro práci s knihovnou stačí do hlavičky HTML dokumentu importovat distribuční soubor incharts.min.js.

<script src="inchart.min.js"></script>
<script>
        var myChart = inchart.create(...)
</script>

Vytvoření grafu

Knihovna inChart obsahuje základní statickou funkci „create()“, která je jednotná pro všechny grafické komponenty. Typ grafu se zadává jako vstupní parametr spolu s referencí na rodičovský element a konfigurační objekt.

            
var element = document.createElement("DIV");
    element.style.width = "550px";
    element.style.height = "250px";

var cnt = document.getElementById("content");
    cnt.appendChild(element);

var config = {
    "legendState": "right",
    "grid_style": "normal",
    "axisX_label": "",
    "axisY_label": "",
    "domain": "value",
    "metric": "count"...
}

var dataset = {
    "row": [
        {
            "value": "2010",
            "count": 28,
            "label": "a0"
        },
        {
            "value": "2011",
            "count": 15,
            "label": "a1"
        }
    ]
}

var chart = incharts.create(element, datatype, config);
    chart.setData(dataset);


       

Properties:

Name	Type	Description
datatype	string	Properties Name Type Description bar string komponenta sloupcového grafu pie string komponenta segmentového grafu line string komponenta spojnicového grafu

Po zavolání metody „create()“ se vytvoří nový element canvas o rozměrech rodičovského elementu, do kterého se zároveň vloží. Reference na vytvořený canvas je následně předána do konstruktoru komponenty grafu, který je volán v závislosti na zadaném typu grafu. Další parametr konstruktoru je konfigurační objekt s atributy pro počátační nastavení grafu.

Globální konfigurace

Konfigurační strukturu je možné předat konstruktoru při vytváření instance grafu, nebo ji dynamicky upravovat za běhu přímo na pomocném objektu options, který je součástí každé komponenty grafu. Tento objekt obsahuje parametry pro vykreslování grafických prvků a celkového rozložení.

Properties:

Name	Type	Description
options	object	Properties Name Type Default Description valueUnit string / jednotka, která se zobrazuje u hodnot animated boolean true povolení animací transition string easeOutQuad přechodová funkce animace vykreslování legendState string bottom pozice legendy dat legendTemplate string {name} šablona pro zobrazení legendy colors array [] barevná paleta pro datové řady interactive boolean true povolení interaktivity background string #fff barva pozadí grafu showTooltip boolean true povolení zobrazení tooltipu responsive boolean true povolení automatického přizpůsobování velikosti domain string / název definičního oboru zobrazovaných hodnot metric boolean / název metriky zobrazovaných hodnot