我正在创建一个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属性配置,并尝试在 kendo-chart-category-axis-item-labels
的类别上使用 ngFor
. 分配 [categoryField]=lineData.categories
仅渲染图形上的第一个点,并错误地渲染该点 . 由于Angular 2的Kendo UI仍在开发中,因此文档有点精简 . 我意识到我的数据可能不是理想的形式,我对任何方法都持开放态度,即使它需要改变我的数据模型 . 我们将非常感谢所有指导 .
文档链接:
1 回答
在工具提示模板中添加类别索引肯定会有所帮助 . 由于现在不可用,我建议将数据转换为完全描述每个数据点的对象数组:
这也要求我们在
name
字段上group data . 完成后,我们可以直接访问这些字段:您可以在this plunkr中看到完整的演示 .
请注意,我们实际上可以删除其中只有零的所有数据点 . 如果我们将missingValues设置为
zero
,图表可以为我们生成这些 . 我们留下以下几点来描述上面的完整数据集:请注意,您不再需要跟踪索引 . 图表会根据日期字段为您执行此操作 . 请参阅this plunkr中的完整演示 .
在我们的错误跟踪器中开发上面的示例时,我会发现这些示例 .
我注意到的另一件事是Tooltips help topic没有解释如何访问TooltipTemplatePoint的字段 . 我很重要 .