Kendo angular 2折线图，需要系列项内的类别轴索引

Question

我正在创建一个 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 ]
        }
    ]
}

总计和总和数组的每个位置对应于类别字段中的一个位置。在我的模板中，我使用 ngFor 遍历系列，它呈现了我正在寻找的图表。

我的问题出现在为系列项目布置工具提示时。默认工具提示显示总值（在 y-axis 上表示的值）。系列总计和总和数组中的每个值都对应于类别位置。我想获取当前类别位置的索引，以便在工具提示中显示总计和总和。我当前的图形布局：

<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 仅呈现图形上的第一个点，并错误地呈现该点。由于 Kendo UI for Angular 2 仍在开发中，因此文档有些精简。我意识到我的数据可能不是理想的形式，我对任何方法都持开放态度，即使它需要 uires 更改我的数据模型。所有gui舞蹈将不胜感激。

文档链接：

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，图表可以为我们生成这些。我们剩下以下几点来描述上面的完整数据集：

[{
    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 中的完整演示。

在开发上述示例时，我注意到一个问题 - 除非您指定格式，否则工具提示不会显示。我在我们的错误跟踪器中 logged this。

我注意到的另一件事是 Tooltips help topic doesn't explain how to access the fields of the TooltipTemplatePoint。我会在此处添加此信息，因为它非常重要。

Kendo angular 2折线图，需要系列项内的类别轴索引

Kendo angular 2 line chart, need index of category axis inside series item

kendo-ui

typescript

kendo-chart

kendo-ui-angular2

angular