找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

130

主题

246

帖子

1528

积分

超级版主

Rank: 8Rank: 8

积分
1528
Winny
超级版主   /  发表于:2021-5-24 15:34  /   查看:1928  /  回复:0
本帖最后由 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来设置坐标轴数值的显示顺序,对象结构如下:
  1. export enum AxisOrientation{
  2.     minMax = 0
  3.     maxMin = 1
  4. }  
复制代码
  具体设置代码如下:
  1. var spread = GC.Spread.Sheets.findControl("ss");
  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();
复制代码




0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部