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轴上表示的值）。系列总计和总和数组中的每个值对应于类别位置。我想得到当前类别位置的索引，以便我可以在工具提示中显示总数和总和。我目前的图表布局：

<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

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没有解释如何访问TooltipTemplatePoint的字段。我会在此处添加此信息，因为它非常重要。

剑道角2线图，需要系列项内的类别轴索引

1 个答案: