FusionCharts X轴显示方式

Handling long x-axis labels

Using rotated and slanted mode

• Using staggered mode and setting stagged lines
• Showing every n-th label
• Displaying short label on axis and showing full name as tool tip

Let's see each of them one by one.

1）Wrap Mode （换行模式）

<chart labelDisplay='WRAP'>

 

2）Rotating and Slanting Labels （旋转模式）

 

<chart numberPrefix='$' labelDisplay='ROTATE'>
    <set label='Jan 2006' value='434' />
    <set label='Feb 2006' value='376' />
    <set label='Mar 2006' value='343' />
    <set label='Apr 2006' value='234' />
    <set label='May 2006' value='356' />
</chart>

 

3）slant the labels at 45 degree （旋转且倾斜45度）

 

<chart labelDisplay='Rotate' slantLabels='1' ..>

4）Staggering labels on multiple lines （交错模式）

<chart labelDisplay='Stagger' ..>.

 

5）多行交错模式

<chart labelDisplay='Stagger' staggerLines='n' ..>

 

6）Showing every n-th label （跳跃模式）

<chart numberPrefix='$' labelStep='4' showValues='0'>
    <set label='Jan 2006' value='434' />
    <set label='Feb 2006' value='376' />
    <set label='Mar 2006' value='343' />
    <set label='Apr 2006' value='234' />
    <set label='May 2006' value='356' />
    <set label='Jun 2006' value='183' />
    <set label='Jul 2006' value='365' />
    <set label='Aug 2006' value='357' />
    <set label='Sep 2006' value='375' />
    <set label='Oct 2006' value='345' />
    <set label='Nov 2006' value='655' />
    <set label='Dec 2006' value='435' />
    <set label='Jan 2007' value='586' />
</chart>

 

 

7）Displaying short label on axis and showing full name as tool tip

<chart numberPrefix='$' rotateValues='1'>
    <set label='J' toolText='January' value='434' />
    <set label='F' toolText='February' value='376' />
    <set label='M' toolText='March' value='343' />
    <set label='A' toolText='April' value='234' />
    <set label='M' toolText='May' value='356' />
    <set label='J' toolText='June' value='183' />
    <set label='J' toolText='July' value='365' />
    <set label='A' toolText='August' value='357' />
    <set label='S' toolText='September' value='375' />
    <set label='O' toolText='October' value='345' />
    <set label='N' toolText='November' value='655' />
    <set label='D' toolText='December' value='435' />
</chart>

 

评论

1 楼 mmjj4067 2012-07-10  

一直在找相关文件