SpreadJS V14 Update1 新特性-图表增强-设置图表水平轴标签位置

SpreadJS V14 Update1在生成图表时，对水平坐标轴标签的显示位置进行了增强，允许用户自己设置水平轴标签的显示位置，可选位置为轴旁，高，低，无，接下来会对实现方式做简单介绍。1. 使用在线表格编辑器设置图表水平轴标签位置
  Step1:选择数据源，插入图表，以柱状图为例：
  
  Step2:双击生成的图表，设置水平轴标签样式；
  
  在坐标轴选项中选则水平（类别）轴，可以看到标签设置项，默认水平轴标签是显示在轴旁。
  设置标签位置为“高”，显示如下：
  
  设置标签位置为“低”，显示如下：
  
  设置标签位置为“无”，显示如下：
  
  以上是使用在线表格编辑器设置水平轴标签位置，注意：饼图、散点图、树状图、漏斗图不支持设置水平轴标签位置。
2.利用API设置图表水平轴标签位置
  SpreadJS中提供了TickLabelPosition枚举对象，具体如下：

1. export enum TickLabelPosition {
   
2.         high = 0,
   
3.         low = 1,
   
4.         nextToAxis = 2,
   
5.         none = 3
   
6.     }

复制代码

具体设置代码如下所示:

1. ar spread = GC.Spread.Sheets.findControl("ss") || GC.Spread.Sheets.findControl("sampleDiv");
   
2. var sheet = spread.getActiveSheet();
   
3. sheet.suspendPaint();
   
4. var dataArray = [
   
5.     ["month", 'fund', 'shares', 'financial products'],
   
6.     [1, 100, -12, 19],
   
7.     [2, -96, 15, 12],
   
8.     [3, 53, 88, 8],
   
9.     [4, -15, 150, 22],
   
10.     [5, 77, -52, 6],
    
11.     [6, 2,  66, 26],
    
12. ];
    
13. sheet.setArray(0, 0, dataArray);
    
14. var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 100, 100, 500, 500, 'A1:E7');
    
15. let axes = chart.axes();
    
16. //设置水平轴标签位置为high
    
17. axes.primaryCategory.tickLabelPosition= GC.Spread.Sheets.Charts.TickLabelPosition.high;
    
18. chart.axes(axes);
    
19. sheet.resumePaint();

复制代码