typescript - Kendo angular 2 grafic liniar, nevoie de indexul axei categoriilor în interiorul elementului seriei

Creez un grafic liniar Kendo UI Angular 2 care afișează numărul de achiziții pe cont într-o anumită dată. Datele primite sunt în următoarea formă:

lineData = {
    categories: [ 11/27/2016, 11/28/2016, 11/29/2016, 11/30/2016 ], // strings 
    series: [
        {
            name: 'Account1',
            totals: [ 0, 2, 0, 0 ],
            sums: [ 0, 3, 0, 0 ]
        },
        {
            name: 'Account2',
            totals: [ 0, 0, 2, 2 ],
            sums: [ 0, 0, 3, 5 ]
        },
        {
            name: 'Account3',
            totals: [ 1, 0, 0, 0 ],
            sums: [ 2.5, 0, 0, 0 ]
        }
    ]
}

Fiecare poziție din array-urile totals și sums corespunde unei poziții din câmpul categories. În șablonul meu, fac un loop peste serii cu ngFor, ceea ce randază un grafic pe care îl caut.

Problema mea apare atunci când așez un tooltip pentru elementele seriei. Tooltip-ul implicit afișează valoarea totală (valoarea indicată pe axa y). Fiecare dintre valorile din array-urile totals și sums ale seriei corespunde poziției categoriei. Aș dori să obțin indexul poziției curente a categoriei pentru a putea afișa totalul și suma în tooltip. Layout-ul graficului meu actual:

<kendo-chart (legendItemClick)="eventHandler($event)">
    <kendo-chart-area [height]="300"></kendo-chart-area>
    <kendo-chart-legend position="right"></kendo-chart-legend>
    <kendo-chart-series >
        <kendo-chart-series-item *ngFor="let item of lineData.series; let i     = index" type="line" [data]="item.totals" [name]="item.name | uppercase">
            <kendo-chart-series-item-tooltip format="{0}">
                <!--<template kendoSeriesTooltipTemplate let-value="item">
                    <span>Items: {{item.totals[CATEGORY INDEX NEEDED HERE]}}</span>
                    <span>Total: {{item.sums[CATEGORY INDEX NEEDED HERE] |     currency:'USD':true:'1.2-2'}}</span>
                </template>-->
            </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-series-item-labels [visible]="true"></kendo-chart-series-    item-labels>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="lineData.categories" [name]="dateAxis"></kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels [step]="1"></kendo-chart-    value-axis-item-labels>
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
</kendo-chart>

Am încercat multe configurații diferite ale proprietăților categoryField și categoryAxis pe elementele seriei și am încercat să folosesc ngFor peste categoriile pentru kendo-chart-category-axis-item-labels. Atribuirea [categoryField]=lineData.categories redă doar primul punct pe grafic și acel punct este redat incorect. Documentația este oarecum săracă, deoarece Kendo UI pentru Angular 2 este încă în dezvoltare. Îmi dau seama că datele mele s-ar putea să nu fie în forma ideală și sunt deschis la orice abordare, chiar dacă necesită modificarea modelului meu de date. Orice ghidare va fi foarte apreciată.

Linkuri către documentație:

ChartComponent

SeriesComponent

ComponentaAxCategorie

ComponentaElementAxeCategorie

ComponentăElementSerie

Răspuns #1

Adăugarea unui index de categorie la șablonul tooltip-ului ar ajuta cu siguranță aici. Deoarece acest lucru nu este disponibil acum, aș recomanda transformarea datelor într-un șir de obiecte care să descrie complet fiecare punct de date:

[{
    date: new Date('2016-11-27'), name: 'Account 1', sum: 0, total: 0
}, {
    date: new Date('2016-11-27'), name: 'Account 2', sum: 0, total: 0
}, {
    date: new Date('2016-11-27'), name: 'Account 3', sum: 2.5, total: 1
},
...
]

Acest lucru necesită, de asemenea, să grupăm datele după câmpul name. Odată ce acest lucru este realizat, putem accesa câmpurile direct:

<kendo-chart-series-item-tooltip>
  <template kendoSeriesTooltipTemplate let-dataItem="dataItem">
    <span>Items: {{dataItem.total}}</span>
    <span>Total: {{dataItem.sum | currency:'USD':true:'1.2-2'}}</span>
  </template>
</kendo-chart-series-item-tooltip>

Poți vedea o demonstrație completă în acest plunkr.

Rețineți că putem de fapt să eliminăm toate punctele de date care conțin doar zero-uri. Graficul poate genera acestea pentru noi dacă setăm missingValues la zero. Ne rămân următoarele puncte care descriu setul complet de date de mai sus:

[{
    date: new Date('2016-11-27'), name: 'Account 3', sum: 2.5, total: 1
}, {
    date: new Date('2016-11-28'), name: 'Account 1', sum: 2, total: 3
}, {
    date: new Date('2016-11-29'), name: 'Account 2', sum: 3, total: 2
}, {
    date: new Date('2016-11-30'), name: 'Account 2', sum: 5, total: 2
}]

Rețineți că nu mai trebuie să urmăriți indicii. Graficul face acest lucru pentru dvs. pe baza câmpului de dată. Consultați demonstrația completă în acest plunkr.

În timp ce dezvoltam exemplele de mai sus, am observat o problemă - sfatul vizual nu se va afișa decât dacă specificați formatul. Am înregistrat acest lucru în sistemul nostru de urmărire a erorilor.

Cealaltă chestie pe care am observat-o este că subiectul de ajutor al Tooltips nu explică cum să accesezi câmpurile TooltipTemplatePoint. Voi adăuga aceste informații acolo deoarece sunt destul de importante.