0
点赞
收藏
分享

微信扫一扫

在FusionCharts中如何对数值进行格式化?


FusionCharts图表提供了数值格式化的大量选项,包括数值的前缀、后缀、小数点位置以及根据事先定义的比例对数值进行换算。


如何在FusionCharts图表中定义小数点的保留位数?


FusionCharts所有图表都支持decimals属性。这个属性让你可以设定图表中所有数值的小数点保留位数。



例如,在你的图表中存在12.432、 13.4和13这三个数字,通过<chart ... decimals='2' >,这些数值将会分别被转换为12.43、13.4和13。



在FusionCharts中如何对数值进行格式化?_FusionCharts




                 设定小数点保留位数之前                                                     设定小数点保留位数之后


如何在FusionCharts图表中对数值进行补零?


这可以通过<chart ... forceDecimals='1' >来实现。看看下面的例子:



 



在FusionCharts中如何对数值进行格式化?_分割线_02


          补零前 通过设置forceDecimals='1'强制补零



 



在双纵轴图表中,你需要为两个纵轴单独设置小数点精度。因此,这时的XML看起来是这样的:



<chart decimals='3' sDecimals='2' forceDecimals='1' >




sDecimals在这里指的是任何依据第二条坐标轴进行绘制的数值的精度。



 



FusionCharts可以对图表中的数值自动进行格式化吗?



 



是的,FusionCharts会自动把数值折算成千(k)或百万(m),同时添加逗号。



 



下面是一个例子:



 



在FusionCharts中如何对数值进行格式化?_分割线_03




 



我不想让图表自动换算数值,可以吗?



 



如果你不想进行数值的自动换算,你可以做如下设置:



<chart formatNumberScale='0'... >



结果是这样的:



在FusionCharts中如何对数值进行格式化?_FusionCharts_04




 



如何从FusionCharts图表的数值中去掉逗号?



 



你可以通过属性formatNumber来去掉逗号,设置formatNumber='0'。但是这样一来,就不能对任何数值的精度进行控制了。



<chart ...formatNumber='0' formatNumberScale='0'... >



设置<chart ...formatNumber='0' formatNumberScale='0'... >之后的效果如下:

在FusionCharts中如何对数值进行格式化?_FusionCharts_05


可以看到逗号被移除了。


同样的,针对双纵轴图表,你需要像下面这样对第二个纵轴进行设置。



<chart ... formatNumber='0' formatNumberScale='0'  sFormatNumber='0'
           sFormatNumberScale='0'... >



在这里,前缀‘s’代表第二个(secondary)坐标轴。



如何对FusionCharts图表中的数值添加前缀和后缀?

你可以对<chart>元素的如下属性进行设置:



 

numberPrefix="$" : 为主坐标轴上的数值增加前缀
 
 
numberSuffix="p.a" : 为主坐标轴上的数值增加后缀 
 
 
sNumberPrefix="$" : 为副坐标轴上的数值增加前缀
  
sNumberSuffix="p.a" : 为副坐标轴上的数值增加后缀



在FusionCharts中如何对数值进行格式化?_后缀_06



添加货币前缀 添加百分比后缀


如何在FusionCharts图表中设置分割线?



你可以通过<chart> 元素的numDivLines属性来设定分割线的数量。看看下面这个例子:



<chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' >
      <set label='John' value='125' />
      <set label='Mary' value='134' />
      <set label='Andy' value='131' />
</chart>


在FusionCharts中如何对数值进行格式化?_分割线_07


在这个图表中我们手工设定了图表的下限和上限,以及分割线的数量。我们还要求FusionCharts不要自动调整分割线。



如何能控制FusionCharts图表中纵轴数值的小数点精度?



可以通过forceYAxisValueDecimals='1'和yAxisValueDecimals='具体数值'在纵轴上显示并控制小数点精度,此时adjustDiv应为0。


<chart ... yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' 
           forceYAxisValueDecimals='1' yAxisValueDecimals='2' decimals='0' >



在FusionCharts中如何对数值进行格式化?_坐标轴_08



对于使用双纵轴的图表,XML应该是:

<chart ... forceSYAxisValueDecimals='1' SYAxisValueDecimals='2' >

举报

相关推荐

0 条评论