剣道2線グラフ、系列内のカテゴリ軸のインデックスが必要

Question

私は特定の日付にアカウントごとに多数の購入を表示する剣道UI 2角折れ線グラフを作成しています。入ってくるデータは、次の形式になります。

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 ] 
     } 
    ] 
} 

合計と合計配列の各位置は、カテゴリフィールド内の位置に対応します。私のテンプレートでは、私はngForでシリーズをループし、私が探しているグラフをレンダリングします。

系列アイテムのツールチップをレイアウトする際に私の問題が来ます。デフォルトのツールチップには合計値（y軸に表示されている値）が表示されます。系列合計と配列の値のそれぞれは、カテゴリの位置に対応します。現在のカテゴリ位置のインデックスを取得したいので、合計と合計をツールチップに表示することができます。私の現在のグラフのレイアウト：

<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> 

私は系列アイテムにcategoryFieldとれるCategoryAxisプロパティの多くの異なる構成を試みたが、kendo-chart-category-axis-item-labelsのカテゴリの上にngForを使用してみました。 [categoryField]=lineData.categoriesを割り当てると、グラフ上の最初の点がレンダリングされ、その点が正しく表示されません。ドキュメンテーションは、角度2の剣道UIがまだ開発中であるため、やや傾いています。私のデータは理想的な形ではないかもしれないことに気がつきました。私のデータモデルを変更する必要があっても、私はどんなアプローチでも公開しています。すべての指針は非常に高く評価されます。

ドキュメントへのリンク：

ChartComponent

SeriesComponent

CategoryAxisComponent

CategoryAxisItemComponent

SeriesItemComponent

Answer 1

カテゴリーヒントをツールチップテンプレートに追加することは間違いなくここで役立ちます。これが現在利用可能ではないので、私は完全に各データポイントを記述するオブジェクトの配列にデータを変換するお勧めします：

[{ 
    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 
}, 
... 
] 

また、これは必要とnameフィールド上の我々group data。それが完了すると、我々は直接フィールドにアクセスすることができます

<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> 

あなたはthis plunkrで完全なデモを見ることができます。

実際には、ゼロだけのデータポイントはすべて削除できます。 missingValuesをzeroに設定すると、Chartはこれらを生成できます。 私たちは、上記の設定完全なデータを記述し、次の点が残っている：あなたは、もはやインデックスを追跡する必要はありませ

[{ 
    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 
}] 

注意。チャートは日付フィールドに基づいてこれを行います。デモの全文はthis plunkrをご覧ください。

上記のサンプルを開発しているうちに、formatを指定しない限りツールチップは表示されません。私たちのバグトラッカーでlogged thisを持っています。

もう1つ気付いたのは、Tooltips help topicは、TooltipTemplatePointのフィールドにアクセスする方法を説明していないことです。私はそれがかなり重要なので、この情報を追加します。