切片器是SpreadJS V10版本之后新增的功能,是一种筛选表格数据的新方式。SpreadJS V11版本发布了图表功能,切片器可以和图表功能进行联动,已达到更好的可视化展示。接下来让我们一步一步来实现切片器与图表联动,最后达到使用切片器来筛选图表以及表格数据的目的。

环境准备

创建一个HTML文件,添加SpreadJS相关script和css的引用。本示例中我们需要如下方所示来引用相关依赖:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Spread HTML Page</title> <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css" rel="stylesheet" /> <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js" type="text/javascript"></script> <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.11.0.0.min.js" type="text/javascript"></script> </head> <body> </body> </html>

之后添加用来承载SpreadJS的div元素。

<body> 
      <div id="ss" style="position: absolute; width: 98%; height: 80%; border: 1px solid gray;"></div> 
</body>

数据源的加载

本示例中绘制图表以及创建表格的数据源是存放于js中,所以需要进行引用

<script src="./data/data.js" type="text/javascript"></script>

SpreadJS初始化

接下来在js代码中初始化SpreadJS

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();

创建表格

sheet.suspendPaint(); sheet.name("State Resident Population 2016"); sheet.setRowCount(69); sheet.setColumnCount(17); // Create the table and set the array as the data source sheet.tables.add("table1", 16, 0, data.length, data[0].length); sheet.setArray(16, 0, data); // Set decimal places to 0 for (var r = 16; r <= 67; r++) { for (var c = 1; c <= 3; c++) { sheet.getCell(r, c).formatter('#'); } } sheet.resumePaint();

 

figure

添加切片器

// Add a  slicer for the table to filter by "State"
var slicer1 = sheet.slicers.add("slicer1", "table1", "State");
slicer1.position(new GC.Spread.Sheets.Point(830, 25));
// Show  the data items in their original positions
slicer1.showNoDataItemsInLast(false);

figure2

添加图表

function initChart(sheet) {
      // Add the  chart
      var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 5, 800,  300, "table1[#all]");
      chart.title({ text: "State Resident Population 2016", color: "darkblue", fontSize: "17pt" });
 }

注意这里需要用table1[#all]这样的方式来将表头添加到Chart中

figure3

这样就完成了,通过切片器的筛选,可以图表上也可以动态的反应其变化。

以上就是如何使用切片器与图表进行联动。

完整demo的下载地址如下:

http://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=45375&page=1&extra=#pid173225

如果您对本产品感兴趣,请关注产品官网:/developer/spreadjs