2

特定の日付のアカウントごとの購入数を表示する kendo ui angular 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 ]
        }
    ]
}

totals および sums 配列の各位置は、カテゴリ フィールド内の位置に対応します。私のテンプレートでは、シリーズを でループ処理し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 プロパティのさまざまな構成を試しngFor、カテゴリをkendo-chart-category-axis-item-labels. 割り当てる[categoryField]=lineData.categoriesと、グラフの最初のポイントのみがレンダリングされ、そのポイントが正しくレンダリングされません。Angular 2 の Kendo UI はまだ開発中であるため、ドキュメントはやや無駄がありません。自分のデータが理想的な形式ではない可能性があることを認識しており、データ モデルの変更が必要になる場合でも、あらゆるアプローチを受け入れます。すべてのガイダンスは大歓迎です。

ドキュメント リンク:

ChartComponent

シリーズコンポーネント

CategoryAxisComponent

CategoryAxisItemComponent

SeriesItemComponent

4

1 に答える 1