标签

图表使您能够设置系列和轴标签的外观和自定义内容。

设置外观

你可以通过以下属性来控制标签的外观:

  • 背景
  • 边境
  • 颜色
  • 字体
  • 保证金
  • 填充

方法自定义轴标签的外观,下面的示例演示如何使用ChartValueAxisLabels组件。

例子
查看源代码
改变主题:

方法自定义系列标签的外观,下面的示例演示如何使用ChartSeriesLabels组件。

例子
查看源代码
改变主题:

自定义内容

通常,序列图和轴图标签显示未格式化的数值或类别名称。

您可以通过以下方法覆盖图表标签内容:

使用格式字符串

图表使您能够为标签分配格式字符串。有关可用格式的完整列表,请参阅kendo-intl图书馆

将标签格式化为货币值

下面的示例演示如何将值轴标签格式化为货币值。

例子
查看源代码
改变主题:

下面的示例演示如何将系列标签格式化为货币值。

例子
查看源代码
改变主题:

格式化占位符

系列标签的格式字符串可以包含多个值占位符—例如,Scatter系列的X和Y值。下表列出了可用的占位符。

系列类型 占位符
区域、条、列、漏斗、线和饼 {0}的值
箱线图
  • {0} -减少
  • {1} q1
  • {2}中值
  • {3}第三季
  • {4}上
  • {5}的意思
  • {6}类别
泡沫
  • {0} - x的值
  • {1} - y值
  • {2}造价值
  • {3}类别名称
子弹
  • {0}的值
  • {1}—target价值
RangeBar和RangeArea
  • {0}从
  • {1} - - -
Scatter和ScatterLine
  • {0} - x的值
  • {1} - y值
烛台和OHLC
  • {0}——开放的价值
  • {1} -价值
  • {2}低价值
  • {3}密切值
  • {4}类别名称

下面的示例演示如何为Scatter系列标签使用值占位符。

例子
查看源代码
改变主题:

设置内容回调

如有提供,内容函数来计算每个标签的文本。函数根据上下文接收不同的参数。有关更多信息,请参阅有关的文档ChartCategoryAxisLabelsPropsChartValueAxisLabelsProps,ChartSeriesLabelsProps

下面的示例演示如何覆盖轴标签的内容。

例子
查看源代码
改变主题:

下面的示例演示如何覆盖系列标签的内容。

例子
查看源代码
改变主题:

渲染自定义视觉效果

方法可以自定义标签的呈现视觉函数。函数接收一个类型的形参AxisLabelVisualArgsSeriesLabelsVisualArgs,返回一组画原语来表示标签。

下面的示例演示如何覆盖轴标签的呈现。

例子
查看源代码
改变主题:

下面的示例演示如何覆盖系列标签的呈现。

例子
查看源代码
改变主题:
Baidu
map