Exploring Data Visualization with SpreadJS

Data visualization can be divided into scientific visualization, information visualization, and visual analytics. The article focuses on visual analytics reports, which require fast data display and flexible operations such as filtering, linking, drilling, conditional formatting, and formula insertion.

The author identifies key difficulties in e‑commerce reporting: high concurrency, strict Excel compatibility, diverse report formats, extensive formula support, and workflow‑related document handling.

Two categories of products are compared: cloud‑document solutions (e.g., WPS, Office Online) and control‑type components (e.g., LuckySheet, Handsontable, SpreadJS). SpreadJS is highlighted as a commercial JavaScript spreadsheet control that fully supports Excel features, offers a complete Excel‑like UI, and provides strong technical support.

Advantages of SpreadJS:

Concurrency: data and template separation reduces bandwidth and server load.

Excel compatibility: users experience near‑identical interaction to Excel, with direct import of complex templates.

Flexible report formats: designers can create or import Excel templates and bind them to JSON data.

Formula support: over 450 native formulas, extensible custom formulas, and full Excel reference capabilities.

Workflow independence: most data is stored in databases, drastically reducing file‑server usage.

Deep dive into SpreadJS:

Rendering performance

SpreadJS uses real‑time Canvas rendering with double buffering and only draws the visible viewport, enabling loading of 500 000 rows in about 200 ms. It also employs sparse arrays for memory‑efficient storage.

Calculation engine

The engine consists of a reference system and a calculation logic system, supporting over 460 native Excel formulas and allowing custom extensions. Formulas are parsed into an AST, and performance tests show near‑native JavaScript speed.

Style system

SpreadJS adopts a layered style architecture to manage borders, fonts, alignments, conditional formats, and even cell‑type specific styles, keeping memory usage reasonable.

Usage examples (Vue integration):

<gc-spread-sheets @workbookInitialized='spreadInitHandle($event)' />
methods:{
  spreadInitHandle: function (spread) {
    this.spread = spread
  }
}

tableDataBind() {
  // data source from backend
  var dataSource = {
    bindPath_table: [{c1:100,c2:90,c3:30,c4:40}, {c1:88,c2:66,c3:55,c4:100}, {c1:30,c2:89,c3:100,c4:40}, {c1:40,c2:66,c3:88,c4:40}]
  };
  var spreadNS = GC.Spread.Sheets;
  var dataSource1 = new spreadNS.Bindings.CellBindingSource(dataSource);
  var table2 = this.activeSheet.tables.add("tableName",0,0,1,5,spreadNS.Tables.TableThemes.light6);
  table2.showFooter(true);
  table2.autoGenerateColumns(false);
  var c1 = new spreadNS.Tables.TableColumn(1); c1.name("语文").dataField("c1");
  var c2 = new spreadNS.Tables.TableColumn(2); c2.name("数学").dataField("c2");
  var c3 = new spreadNS.Tables.TableColumn(3); c3.name("英语").dataField("c3");
  var c4 = new spreadNS.Tables.TableColumn(4); c4.name("化学").dataField("c4");
  var c5 = new spreadNS.Tables.TableColumn(5); c5.name("合计");
  table2.bindColumns([c1,c2,c3,c4,c5]);
  table2.bindingPath("bindPath_table");
  table2.setColumnDataFormula(4, "=[@语文]+[@数学]+[@英语]+[@化学]");
  table2.setColumnFormula(4, "=SUBTOTAL(109,[合计])");
  this.activeSheet.options.allowCellOverflow = true;
  this.activeSheet.setDataSource(dataSource1);
  this.spread.resumePaint();
}

Conditional formatting examples (icon sets, data bars, duplicate values, specific text) are also provided with corresponding code snippets wrapped in tags.

In conclusion, the author believes the exploration of SpreadJS can help teams building market dashboards, email subscription reports, and collaborative visual analytics, while also inviting readers to follow the team and consider joining the front‑end group.