首页 文章

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

提问于
浏览
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 ]
        }
    ]
}

总计和总和数组的每个位置对应于类别字段中的位置 . 在我的模板中,我使用 ngFor 循环遍历系列,这将呈现我正在寻找的图形 .

Graph with proper values

我的问题出现在为系列项目布置工具提示时 . 默认工具提示显示总值(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仍在开发中,因此文档有点精简 . 我意识到我的数据可能不是理想的形式,我对任何方法都持开放态度,即使它需要改变我的数据模型 . 我们将非常感谢所有指导 .

文档链接:

ChartComponent

SeriesComponent

CategoryAxisComponent

CategoryAxisItemComponent

SeriesItemComponent

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 字段上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中的完整演示 .

    在我们的错误跟踪器中开发上面的示例时,我会发现这些示例 .

    我注意到的另一件事是Tooltips help topic没有解释如何访问TooltipTemplatePoint的字段 . 我很重要 .

相关问题