2

我正在创建一个 kendo 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 属性配置，并尝试ngFor在kendo-chart-category-axis-item-labels. 分配[categoryField]=lineData.categories仅渲染图上的第一个点，并错误地渲染该点。文档有些精简，因为 Angular 2 的 Kendo UI 仍在开发中。我意识到我的数据可能不是理想的形式，我愿意接受任何方法，即使它需要更改我的数据模型。所有指导将不胜感激。

文档链接：

图表组件

系列组件

类别轴组件

类别轴项组件

系列项目组件

4

1 回答 1

4

在工具提示模板中添加类别索引肯定会有所帮助。由于现在不可用，我建议将数据转换为完全描述每个数据点的对象数组：

[{
    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完成后，我们可以直接访问这些字段：

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

你可以在这个 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
}]

请注意，您不再需要跟踪索引。图表根据日期字段为您执行此操作。请参阅此 plunkr中的完整演示。

在开发上面的示例时，我注意到一个问题 - 除非您指定格式，否则工具提示将不会显示。我已经在我们的错误跟踪器中记录了这个。

我注意到的另一件事是Tooltips 帮助主题没有解释如何访问TooltipTemplatePoint的字段。我将在此处添加此信息，因为它相当重要。

于 2016-12-17T10:20:52.363 回答