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

Question

我将 kendo 图表组件与 "line" 类型的系列项目一起使用。

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

是否也可以访问模板中的当前类别？如果我绑定到对象而不是原始值，是否可以访问当前数据项而不仅仅是值？

谢谢

Answer 1

有办法。提供的文档并不简单，我也发现它很混乱。

可以通过声明一个变量并将其设置为 category.

来访问当前类别

如果您使用一个对象来设置kendo-chart-series-item的数据，该对象的其他属性也可以用作工具提示。我们在这里使用 dataItem 属性来访问我设置的 data 的其他属性。

  <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

工作代码

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

testData = [{
      date: 1999,
      percent: 0.23,
      number: 4271
    },
    {
      date: 2000,
      percent: 0.41,
      number: 7624
    },
    {
      date: 2001,
      percent: 0.55,
      number: 9987
    }]

这里我使用对象的数字属性作为工具提示。希望这可以帮助。如果您无法解决，请告诉我。乐于助人

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

Kendo UI Angular 2+ Chart - Series Tooltip Template - Access to Category Value and Other Data

kendo-ui-angular2

angular