概述
本 Demo 展示了如何创建自定义图表切片器。通过继承 GeneralSlicerData 类实现自定义切片器数据，并使用 ECharts 柱状图作为切片器 UI。用户点击图表柱子时，工作表会根据筛选条件显示或隐藏相应的行数据。
实现思路
从 GeneralSlicerData 派生自定义类 ChartSlicerData，实现监听器模式
重写 onFiltered 方法，在筛选时通知所有监听器更新界面
创建自定义切片器类 ChartSlicer，使用 ECharts 渲染柱状图
处理图表点击事件，调用 doFilter 方法执行筛选
在 onFiltered 回调中，根据筛选结果控制工作表行的显示/隐藏
代码解析
创建自定义切片器数据类
这段代码通过原型继承方式从 GeneralSlicerData 派生出 ChartSlicerData 类，添加了 listeners 数组用于管理监听器。
实现监听器管理方法
attachListener 方法将切片器监听器添加到数组中，dettachListener 方法从数组中移除监听器。
重写 onFiltered 方法
当数据被筛选时，onFiltered 方法会被调用。它遍历所有监听器，调用每个监听器的 onFiltered 方法传递筛选结果，并调用 refreshList 方法刷新界面。
处理图表点击事件
当用户点击图表柱子时，根据点击的柱子索引确定筛选范围，收集符合条件的数据索引，然后调用 doFilter 方法执行筛选。
在 onFiltered 回调中更新工作表
筛选完成后，根据筛选结果控制工作表行的显示。首先隐藏所有行，然后显示筛选结果中包含的行。使用 suspendPaint 和 resumePaint 提高性能。
运行效果
页面左侧显示数据工作表，右侧显示两个图表切片器（"上榜年数"和"员工数"）
每个图表切片器显示一个柱状图，横轴表示数据范围，纵轴表示公司数量
点击图表中的任意柱子，工作表会自动筛选并显示符合该范围的数据行
点击"Remove Filter"按钮可以清除筛选，恢复显示所有数据
两个图表切片器共享同一个切片器数据，筛选一个会影响另一个的显示
API 参考
GeneralSlicerData 构造函数
data：二维数组，切片器的数据源
columnNames：字符串数组，列名集合
doFilter 方法
columnName：要筛选的列名
exclusiveRowIndexes：要保留的数据行索引数组
getFilteredRowIndexes 方法
返回筛选后的行索引数组。
getExclusiveData 方法
获取指定列的唯一（非重复）数据数组。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.options.tabStripRatio = 0.6;
initSpread(spread);
};
function initSpread(spread) {
var sd = data;
if (sd.length > 0) {
if (sd) {
if (!spread) {
return;
}
var sheet = spread.getActiveSheet();
initSlicer(sheet, sd);
}
}
}
function parseJSONToArray(datas) {
if (!datas || datas.length <= 0) {
return;
}
var columnNames = Object.keys(datas[0]), keyCount = columnNames.length,
arrayDatas = [];
for (var i = 0, len = datas.length; i < len; i++) {
var data = datas[i];
if (data) {
var dataItem = [];
arrayDatas.push(dataItem);
for (var j = 0; j < keyCount; j++) {
dataItem.push(data[columnNames[j]]);
}
}
}
return {
columnNames: columnNames,
arrayDatas: arrayDatas
};
}
function getMaxInArray(array) {
if (!array || array.length <= 0) {
return;
}
var max = array[0];
for (var i = 1, len = array.length; i < len; i++) {
if (array[i] > max) {
max = array[i];
}
}
return max;
}
function ChartSlicerData(datas, columnNames) {
GC.Spread.Slicers.GeneralSlicerData.call(this, datas, columnNames);
this.listeners = [];
}
ChartSlicerData.prototype = GC.Spread.Slicers.GeneralSlicerData.prototype;
ChartSlicerData.prototype.constructor = ChartSlicerData;
ChartSlicerData.prototype.onFiltered = function () {
let self = this;
self.listeners.forEach(function (listener) {
listener.onFiltered({dataIndexes: self.getFilteredRowIndexes()});
listener.refreshList();
})
};
ChartSlicerData.prototype.attachListener = function (listener) {
this.listeners.push(listener);
};
ChartSlicerData.prototype.dettachListener = function (listener) {
for (var i = 0; i < this.listeners.length; i++) {
if (this.listeners[i] === listener) {
this.listeners.splice(i);
break;
}
}
};
function ChartSlicer(container, columnName, slicerData, title, legend) {
this.data = slicerData;
this.container = container;
this.columnName = columnName;
this.slicerData = slicerData;
this.title = title;
this.legend = legend;
this.xAxis = [];
this.series = [];
this.verticalChart = null;
this.slicerData.attachListener(this);
this.onDataLoaded();
}
ChartSlicer.prototype.constructor = ChartSlicer;
ChartSlicer.prototype.getXAxis = function () {
var xAxis = [];
var exclusiveData = this.slicerData.getExclusiveData(this.columnName);
var maxValue = getMaxInArray(exclusiveData);
if (this.columnName === "years on list") {
var xAxisCount = 6,
xTick = Math.floor(maxValue / xAxisCount);
for (var i = 1; i <= xAxisCount; i++) {
xAxis.push(xTick * i);
}
}
else if (this.columnName === "workers") {
if (typeof maxValue === "number") {
var base = 1;
while (maxValue > 1) {
xAxis.push(Math.pow(10, base));
base++;
maxValue = parseInt(maxValue / 10);
}
}
}
return xAxis;
};
ChartSlicer.prototype.getSeriesByXAxisScope = function (xAxis, columnName, slicerData) {
if (!xAxis || xAxis.length <= 0 || !slicerData) {
return;
}
var series = [], data = slicerData.getData(columnName),
filterdRowIndexes = slicerData.getFilteredRowIndexes();
for (var x = 0, len1 = xAxis.length; x < len1; x++) {
var scopeStart = 0;
if (x > 0) {
scopeStart = xAxis[x - 1];
}
var scopeEnd = xAxis[x];
var seriesItem = 0;
for (var i = 0, len = filterdRowIndexes.length; i < len; i++) {
var rowIndex = filterdRowIndexes[i], dataItem = data[rowIndex];
if (dataItem >= scopeStart && dataItem < scopeEnd) {
seriesItem++;
}
}
series.push(seriesItem);
}
return series;
}
ChartSlicer.prototype.onDataLoaded = function () {
var self = this;
var chartDiv = document.createElement('div'),
footerDiv = document.createElement('div');
chartDiv.id = 'chart_div';
chartDiv.style.width = '100%';
chartDiv.style.height = '90%';
footerDiv.innerHTML = '<span id="text_span"></span>'
+ '<button>Remove Filter</button>';
textSpan = footerDiv.firstChild;
removeFilter = footerDiv.lastChild;
removeFilter.onclick = function (e) {
self.slicerData.doUnfilter(self.columnName);
footerDiv.style.display = 'none';
};
footerDiv.style.width = '100%';
footerDiv.style.height = '100%';
footerDiv.style.display = 'none';
self.container.appendChild(chartDiv);
self.container.appendChild(footerDiv);
this.xAxis = this.getXAxis();
this.series = this.getSeriesByXAxisScope(this.xAxis, this.columnName, this.slicerData);
this.verticalChart = echarts.init(chartDiv);
var option = {
title: {
subtext: this.title,
},
legend: {
data: [this.legend]
},
grid: {
x: "15%",
width: "80%",
x2: "5%",
y: "30%",
height: "59%",
y2: "15%"
},
xAxis: [
{
type: 'category',
data: this.xAxis,
axisTick: {
show: true,
length: 2,
lineStyle: {
color: "#333",
width: 1
}
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: this.legend,
type: "bar",
data: this.series,
itemStyle: {
normal: {
color: "#9fd5b7",
label: {
show: true
}
},
emphasis: {
color: "#ababab"
}
}
}
]
};
this.verticalChart.setOption(option);
function clickHandler(param) {
var dataIndex = param.dataIndex;
var startScope = 0,
endScope = self.xAxis[dataIndex];
if (dataIndex > 0) {
startScope = self.xAxis[dataIndex - 1];
}
var _footerDiv = self.container.lastChild;
_footerDiv.firstChild.innerText = self.title + ': ' + startScope + ' to ' + endScope;
_footerDiv.style.display = 'block';
var indexes = [];
var exclusiveData = self.slicerData.getExclusiveData(self.columnName);
for (var i = 0, len = exclusiveData.length; i < len; i++) {
if (exclusiveData[i] >= startScope && exclusiveData[i] < endScope) {
indexes.push(i);
}
}
self.slicerData.doFilter(self.columnName, {exclusiveRowIndexes: indexes});
}
this.verticalChart.on("click", clickHandler);
};
ChartSlicer.prototype.refreshList = function () {
this.verticalChart.setSeries([{data: this.getSeriesByXAxisScope(this.verticalChart.getOption().xAxis[0].data, this.columnName, this.slicerData)}]);
};
ChartSlicer.prototype.onFiltered = function (data) {
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));;
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.suspendEvent();
var filteredRowIndexs = data.dataIndexes;
for (var r = 0, len = sheet.getRowCount(); r < len; r++) {
sheet.setRowVisible(r, false);
}
for (var i = 0, len = filteredRowIndexs.length; i < len; i++) {
sheet.setRowVisible(filteredRowIndexs[i], true);
}
sheet.resumeEvent();
sheet.resumePaint();
};
function initSlicer(sheet, datas) {
sheet.suspendPaint();
sheet.name("The 2014 Inc. 5000.");
sheet.setDataSource(datas);
sheet.setColumnCount(20);
sheet.resumePaint();
var ret = parseJSONToArray(datas);
var slicerData = new ChartSlicerData(ret.arrayDatas, ret.columnNames);
var yearsOnListChart = new ChartSlicer(document.getElementById('yearsOnList'), "years on list", slicerData, "上榜年数", "公司数量");
var workersChart = new ChartSlicer(document.getElementById('workers'), "workers", slicerData, "员工数", "公司数量");
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/external/echart/echarts.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/chartSlicer.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div id="workers" class="sample-chart"></div>
<div id="yearsOnList" class="sample-chart"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: auto;
float: left;
}
.options-container {
float: right;
width: 290px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.sample-chart {
width: 100%;
height: 48%;
box-sizing: border-box;
}
button {
background: #9fd5b7;
border: none;
border-radius: 0;
margin-left: 3px;
}
button:hover {
background: #ababab;
border: none;
border-radius: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
