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

FusionCharts图表提供了数值格式化的大量选项,包括数值的前缀、后缀、小数点位置以及根据事先定义的比例对数值进行换算。
 
如何在FusionCharts图表中定义小数点的保留位数?
 
FusionCharts所有图表都支持decimals属性。这个属性让你可以设定图表中所有数值的小数点保留位数。
 
例如,在你的图表中存在12.432、 13.4和13这三个数字,通过<chart ... decimals='2' >,这些数值将会分别被转换为12.43、13.4和13。
在FusionCharts中如何对数值进行格式化?_第1张图片

                 设定小数点保留位数之前                                                     设定小数点保留位数之后
 
如何在FusionCharts图表中对数值进行补零?
 
这可以通过<chart ... forceDecimals='1' >来实现。看看下面的例子:
 
在FusionCharts中如何对数值进行格式化?_第2张图片
          补零前 通过设置forceDecimals='1'强制补零
 
在双纵轴图表中,你需要为两个纵轴单独设置小数点精度。因此,这时的XML看起来是这样的:
 <chart decimals='3' sDecimals='2' forceDecimals='1' > 

sDecimals在这里指的是任何依据第二条坐标轴进行绘制的数值的精度。
 
FusionCharts可以对图表中的数值自动进行格式化吗?
 
是的,FusionCharts会自动把数值折算成千(k)或百万(m),同时添加逗号。
 
下面是一个例子:
 
在FusionCharts中如何对数值进行格式化?_第3张图片

 
我不想让图表自动换算数值,可以吗?
 
如果你不想进行数值的自动换算,你可以做如下设置:
 <chart formatNumberScale='0'... > 
结果是这样的:
在FusionCharts中如何对数值进行格式化?_第4张图片

 
如何从FusionCharts图表的数值中去掉逗号?
 
你可以通过属性formatNumber来去掉逗号,设置formatNumber='0'。但是这样一来,就不能对任何数值的精度进行控制了。
 <chart ...formatNumber='0' formatNumberScale='0'... > 
设置<chart ...formatNumber='0' formatNumberScale='0'... >之后的效果如下:
在FusionCharts中如何对数值进行格式化?_第5张图片

 
可以看到逗号被移除了。
 
同样的,针对双纵轴图表,你需要像下面这样对第二个纵轴进行设置。
 <chart ... formatNumber='0' formatNumberScale='0'  sFormatNumber='0'
           
sFormatNumberScale='0'... >
在这里,前缀‘s’代表第二个(secondary)坐标轴。
 
如何对FusionCharts图表中的数值添加前缀和后缀?
 
你可以对<chart>元素的如下属性进行设置:
 
numberPrefix="$" : 为主坐标轴上的数值增加前缀
numberSuffix="p.a" : 为主坐标轴上的数值增加后缀 
sNumberPrefix="$" : 为副坐标轴上的数值增加前缀
sNumberSuffix="p.a" : 为副坐标轴上的数值增加后缀
在FusionCharts中如何对数值进行格式化?_第6张图片
添加货币前缀 添加百分比后缀
 
如何在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中如何对数值进行格式化?_第7张图片

在这个图表中我们手工设定了图表的下限和上限,以及分割线的数量。我们还要求FusionCharts不要自动调整分割线。
 
如何能控制FusionCharts图表中纵轴数值的小数点精度?
 
可以通过forceYAxisValueDecimals='1'和yAxisValueDecimals='具体数值'在纵轴上显示并控制小数点精度,此时adjustDiv应为0。
 
 <chart ... yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' 
           
forceYAxisValueDecimals='1' yAxisValueDecimals='2' decimals='0' >

在FusionCharts中如何对数值进行格式化?_第8张图片

对于使用双纵轴的图表,XML应该是:
 <chart ... forceSYAxisValueDecimals='1' SYAxisValueDecimals='2' > 

你可能感兴趣的:(FusionCharts)