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

收藏

本帖最后由 Winny 于 2021-5-21 17:35 编辑

SpreadJS V14 Update1在生成图表时，对水平坐标轴标签的显示位置进行了增强，允许用户自己设置水平轴标签的显示位置，可选位置为轴旁，高，低，无，接下来会对实现方式做简单介绍。1. 使用在线表格编辑器设置图表水平轴标签位置
Step1:选择数据源，插入图表，以柱状图为例：
image.png935798644.png

Step2:双击生成的图表，设置水平轴标签样式；
image.png648780822.png

  在坐标轴选项中选则水平（类别）轴，可以看到标签设置项，默认水平轴标签是显示在轴旁。
  设置标签位置为“高”，显示如下：
   image.png479893493.png

设置标签位置为“低”，显示如下：
image.png139339293.png

设置标签位置为“无”，显示如下：
image.png267379454.png

以上是使用在线表格编辑器设置水平轴标签位置，注意：饼图、散点图、树状图、漏斗图不支持设置水平轴标签位置。
2.利用API设置图表水平轴标签位置
SpreadJS中提供了TickLabelPosition枚举对象，具体如下：

export enum TickLabelPosition {
high = 0,
low = 1,
nextToAxis = 2,
none = 3
}

复制代码

具体设置代码如下所示:

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

复制代码

		自动登录	找回密码
密码			立即注册

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

0 个回复