坐标轴标签格式化

坐标轴标签格式化是图表控件运用中十分重要的环节,如何使绘制的图表看起来更易懂易读,这就需要对标签进行数字或者文本格式化,在标签中加入度量衡等,这一节我们将会一起探讨AnyChart如何进行轴标签格式化

1)AnyChart是使用XML格式作为数据传输,几乎所有图表元素的相关设置都是在XML文件里进行,要对轴标签进行格式化是在<labels>的子节点<format>下进行,如下代码:

<y_axis>
  <labels>
    <format>{%Value}</format>
  </labels>
</y_axis>

为了使图表中各种格式化更简单,AnyChart提供了很多关键词来用于格式化,每个关键词都是像{%KeywordName}这种格式,如{%Value} 或者 {%AxisName},在图表显示前所有关键词都会被对应的值取代。在轴标签格式化中最常用的关键词就是{%Value},该关键词对应轴标签值

2)为轴标签加上前缀或者后缀,加上一些度量衡单位,如下:

<y_axis>
  <labels>
    <format>${%Value} USD</format>
  </labels>
</y_axis>

3)轴标签数字格式化,设置数字显示格式,小数位数等,像下面的代码:

<y_axis>
  <labels>
     <format> € {%Value}{numDecimals:2,decimalSeparator:.,thousandsSeparator:',scale:(1.4095)|()}</format>
              </labels>
              <title>
                <text>Revenue in Euros</text>
              </title>
</y_axis>

上面的格式化代码实现Y轴标签以欧元的格式显示,numDecimals:2表示保留2位小数,decimalSeparator:.表示小数点符号是“点”, thousandsSeparator:'表示千分位符号使用分号,scale:(1.4095)|()表示欧元与美元的比例
4)限制轴标签显示的字节数,有时标签长度太长,您想只显示部分标签,如下代码:

<format>{%Value}{maxChar:5,maxCharFinalChars:} </format>

其中maxChar表示最多显示5位,maxCharFinalChars表示没显示完的数字或者文本用什么表示,默认情况下是以“…”省略号表示,当然您可以设置为其他来代替或者什么都不设置

5)下面这个表列出了所有AnyChart内嵌的关于轴标签值的关键词

关键词

描述

{%Value}

表示轴标签对应的值

{%AxisSum}

表示所有绑定到该轴的数据序列的所有数据点的Y值总和

{%AxisBubbleSizeSum}

表示所有绑定到该轴的数据序列的所有气泡点的大小总和

{%AxisMax}

表示所有绑定到该轴的数据序列的所有数据点的最大值

{%AxisMin}

表示所有绑定到该轴的数据序列的所有数据点的最小值

{%AxisScaleMax}

表示最大比例值

{%AxisScaleMin}

表示最小比例值

{%AxisBubbleSizeMax}

表示所有绑定到该轴的数据序列的所有气泡点中最大气泡的大小

{%AxisBubbleSizeMin}

表示所有绑定到该轴的数据序列的所有气泡点中最小气泡的大小

{%AxisAverage}

表示所有绑定到该轴的数据序列的所有数据点的值的平均值

{%AxisMedian}

表示所有绑定到该轴的数据序列的所有数据点的值的中值

{%AxisName}

轴名字

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值