SpreadJS V14 Update1 新特性 - 图表增强 - 逆序刻度值

收藏

本帖最后由 Winny 于 2021-5-24 15:38 编辑

在许多工程类项目中，经常会遇到需要将图表坐标轴逆序展示的场景，SpreadJS V14 Update1在生成图表时，对图表坐标轴进行了增强，允许用户设置坐标轴数据的显示方向，以下会讲解具体的实现方式。
1. 使用在线表格编辑器设置坐标值逆序
Step1: 选中数据源，插入图表；
Step2:双击图表，在右侧面板设置；
选择坐标轴选项下的水平（类别）轴或者垂直（值）轴，可以分别实现对水平轴和垂直轴的设置
image.png122510985.png

选择水平（类别）轴，勾选逆序刻度值，显示如下：
image.png600471191.png

与前一张图对比可以看到，水平轴数据已经由“苹果香蕉樱桃”变成了“樱桃香蕉苹果”
选择垂直（值）轴，勾选逆序刻度值，显示如下：
image.png11268919.png

2. 使用API设置坐标轴逆序
SpreadJS提供枚举对象AxisOrientation来设置坐标轴数值的显示顺序，对象结构如下：

export enum AxisOrientation{
minMax = 0
maxMin = 1
}

复制代码

具体设置代码如下：

var spread = GC.Spread.Sheets.findControl("ss");
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();

复制代码

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

SpreadJS V14 Update1 新特性 - 图表增强 - 逆序刻度值

0 个回复