问题标题

VChart 图表标签格式化的方法有哪些？

问题描述

VChart 柱状图中，默认展示的是柱子对应数值的标签，我想展示类似 x轴名称: y数值这样的内容，有哪些办法可以自定义标签展示？

解决方案

有两种推荐的配置方式：

• 通过 label.formatMethod 配置格式化函数。
  
• 函数参数为(text: string | string[], datum?: any)，text 为默认展示的文本，datum为图元数据。
  
• 函数返回值可以是一个字符串或字符串数组。其中，字符串数组会默认换行展示。
  
• 如果要配置为富文本，那么返回值则为富文本配置对象；
  

label: {
    formatMethod:(value, data) => `${data.name}: ${value}`
}</br>

• 通过 label.formatter 配置模板字符串。
  

label: {
   formatter: `{name} : {value}`
}</br>

相关文档

formatMethod demo: https://visactor.io/vchart/demo/label/richtext-label
Formatter demo：https://visactor.io/vchart/demo/label/label-formatter
相关配置项：https://visactor.io/vchart/option/barChart#label.formatMethod
github：https://github.com/VisActor/VChart