首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Kendo UI角度2+图-系列工具提示模板-访问类别值和其他数据

Kendo UI角度2+图-系列工具提示模板-访问类别值和其他数据
EN

Stack Overflow用户
提问于 2017-08-18 09:35:14
回答 1查看 3.6K关注 0票数 2

我使用的是kendo图表组件和"line“类型的系列项。

根据文档这里,可以在系列工具提示模板中使用当前值作为占位符。

是否也有可能访问模板中的当前类别?如果我绑定到对象而不是原始值,那么可以访问当前数据项而不仅仅是值吗?

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-03 09:36:10

有个办法。所提供的文档并不简单,我也觉得它令人困惑。

可以通过声明变量并将其设置为类别来访问当前类别。

如果您使用对象来设置kendo图表系列项的数据,则该对象的其他属性也可以用作工具提示。我们在这里使用dataItem属性来访问我设置的数据的其他属性。

代码语言:javascript
复制
  <kendo-chart-series-item-tooltip>
        <ng-template let-value="value" let-category="category" let-dataItem="dataItem">
          Number of children: {{ dataItem.number }}
        </ng-template>
  </kendo-chart-series-item-tooltip>

在这里,数组中的每个dataItem对象都可以设置为工具提示,这里可以找到可以访问的工具提示的完整属性列表。

http://www.telerik.com/kendo-angular-ui/components/charts/api/TooltipTemplatePoint/#toc-category

工作代码

代码语言:javascript
复制
<kendo-chart>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-value="value">
          Default Content {{ value }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-title text="% children with conscientious objection recorded"></kendo-chart-title>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
          [categories]="['1999', '2000', '2001']"
          [title]="{ text: 'Years' }">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="column" [data]="testData" field="percent" >
          <kendo-chart-series-item-tooltip>
            <ng-template let-value="value" let-category="category" let-dataItem="dataItem">
              Number of children: {{ dataItem.number }}
            </ng-template>
          </kendo-chart-series-item-tooltip>

        </kendo-chart-series-item>
      </kendo-chart-series>
 </kendo-chart>

在类型记录文件中声明下面的TestData对象

代码语言:javascript
复制
testData = [{
      date: 1999,
      percent: 0.23,
      number: 4271
    },
    {
      date: 2000,
      percent: 0.41,
      number: 7624
    },
    {
      date: 2001,
      percent: 0.55,
      number: 9987
    }]

这里,我使用对象的number属性作为工具提示。希望这能有所帮助。如果你解决不了这个问题,请告诉我。很乐意帮忙

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45753351

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档