告别低效！在线 Excel 图表制作方法，一键提升工作效率

引言

大数据时代，数据可视化已成为信息理解和分析的关键。随着业务需求日益多样化和个性化，企业越来越需要将 Excel 强大的数据处理能力与自身信息系统深度融合，特别是在自定义表格应用中嵌入专业图表功能。

SpreadJS 作为一款功能强大的纯前端表格控件，正是这一需求的完美解决方案。它提供丰富的 API 和特性，能够：

无缝集成 Excel 级图表功能至自定义系统
还原原生 Excel 图表制作体验
支持高度个性化的数据可视化需求
确保系统集成的一致性和稳定性

通过 SpreadJS，企业可以轻松构建兼具专业性和灵活性的数据可视化解决方案，赋能业务决策和数据分析。

图表制作流程

1、图表数据准备

Excel 中制作图表，首先要对数据进行整理。数据应按逻辑顺序排列，确保每列或每行代表一个数据系列。例如，在分析制造业数据时，将日期、已完成组件数等分别放在不同列，方便后续选择数据区域制作图表。如下图所示：

对数据整理后，接下来进行图表类型选择：

2、图表类型选择

Excel 提供了多种图表类型，如柱状图适合比较数据大小，折线图用于展示数据趋势，饼图则能直观呈现各部分占比。根据数据特点和展示目的选择合适的图表类型至关重要。比如，展示不同地区的销售额对比，柱状图是较好的选择；而分析销售额随时间的变化，折线图更能清晰呈现趋势。

3、图表制作步骤：

选中数据区域：准确选中要制作图表的数据范围，可通过鼠标拖动或快捷键选择。
插入图表：点击 “插入” 选项卡，在众多图表类型中选择合适的图表。
调整图表元素：设置图表标题，使其准确概括图表内容；修改轴标签，让坐标轴含义清晰；调整数据系列格式，如颜色、线条粗细等；合理放置图例，方便识别不同数据系列。
美化图表：选择合适的图表样式，添加数据标签，使数据更直观，还可调整图表的字体、字号、颜色等，使其美观且符合整体风格。

通过上述步骤后，我们对如何创建图表，有了一个基础的了解。但是在一些项目中，需要嵌入在线电子表格。比如：

在企业日常运营中，需要收集各部门、各分支机构的数据，如销售数据、财务数据、人力资源数据等。SpreadJS 可创建在线填报表格，设置数据校验规则，确保数据准确性和完整性，还能实现批量导入导出，提高数据收集效率。

或者政府部门进行统计调查时，可利用 SpreadJS 设计统计报表，基层单位通过网络在线填报，上级部门实时汇总和分析数据，实现数据的高效流转和管理。

接下来我们简单介绍一下如何使用 SpreadJS 在线制作图表的用法。

前端表格技术 SpreadJS

SpreadJS 是一款基于 HTML5 的纯前端表格控件，具有高性能、跨平台、功能丰富等特点。它提供了类似 Excel 的功能，包括数据编辑、公式计算、数据验证等，同时支持图表制作，为开发人员提供了便捷的方式在自定义应用中集成表格和图表功能。

如下图所示，可以快速对现金流进行分析：

SpreadJS 具有很多优势，比如纯前端实现，无需依赖服务器端，减少服务器负载，提高应用响应速度。又比如兼容性强，支持多种浏览器和设备，确保在不同平台上都能稳定运行。

接下来介绍，如何在项目中使用 SpreadJS。

使用 SpreadJS 创建基本的表格结构，设置好数据输入区域和图表展示区域。通过 SpreadJS 的 API 定义表格的行数、列数、列宽、行高以及单元格的样式等。例如：

// 创建SpreadJS实例
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('spreadjs'));
// 获取工作表
var sheet = spread.getActiveSheet();
// 设置表格行数和列数
sheet.setRowCount(10);
sheet.setColumnCount(5);

准备好 SpreadJS 后，用户可以按照Excel的操作习惯，添加数据，创建图表。此步骤与Excel一致，不再重复描述。

SpreadJS 官网提供了一个在线表格编辑器，我们可以在此基础上进行操作。

依次点击“文件”、“新建”、“空白工作簿”。

通过“F12”打开控制台，输入以下代码：

let designer = GC.Spread.Sheets.Designer.findControl('gc-designer-container')
let spread = designer.getWorkbook()
let sheet = spread.getActiveSheet()

通过上述代码，便可以获取 sheet对象，在 sheet 工作表中创建数据，添加图表。

接下来为大家介绍，如何通过代码方式创建数据源，添加图表。

数据准备

在 SpreadJS，有三种数据方式可以创建数据。分别是为单元格赋值、数据绑定、dataManager 引擎。

1、setValue/setArray

通过 setValue 对一个单元格赋值，通过 setArray 对区域赋值。

sheet.setValue(0,0,'hello SpreadJS')
var array = [[1,2,3],[4,5],[6,7,8,9]];
sheet.setArray(1, 2, array);

结果如下：

如果数据量较大，我们更推荐setArray批量设置值。

我们现在有一组浏览器数据，通过setArray填充至单元格中。

    var dataArray = [
        ["", 'Chrome', 'FireFox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
        ["2015", 0.5651, 0.1734, 0.1711, 0.427, 0, 0.184, 0.293],
        ["2016", 0.6230, 0.1531, 0.1073, 0.464, 0.311, 0.166, 0.225],
        ["2017", 0.6360, 0.1304, 0.834, 0.589, 0.443, 0.223, 0.246]
    ];
    sheet.setArray(0, 0, dataArray);

结果如下：

接下来，通过代码方式创建一个柱状图。

sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 800, 300, "A1:H4");

结果如下：

至此，图表就创建好了。接下来，可以通过UI 方式美化图表。

如上图所示，点击“图表设计” Tab ，可以看到菜单栏中可以“添加图表元素”，“更改颜色”，“选择数据”，以及“设置格式” ，点击“设置格式”，可以看到右侧Panel出现。可以修改样式。

当然也可以用代码方式配置图表：

1) 获取图表对象

//根据索引获取
let chart = sheet.charts.all()[0]
//根据图表名称获取
let chart= sheet.charts.get('Chart1')

2） 配置图表属性：设置图表的标题、坐标轴标签、图例、数据标签等属性，使图表更易读。例如：

// 设置图表标题
var title = chart.title();
title.text = "浏览器数据";
title.fontFamily = "楷体 Light";
chart.title(title);
// 设置坐标轴字体颜色
var axes = chart.axes(); 
axes.primaryCategory.style.color = '#f15353';
// 设置X轴标题
axes.primaryValue.title.text = '占比';
// 设置y轴标题
axes.primaryCategory.title.text = '浏览器';
//最后记得设置回去
chart.axes(axes)

结果如下：

3）美化图表样式：通过 SpreadJS 的 API 调整图表的颜色、线条样式、字体等，使图表更美观。例如：

// 设置图表背景颜色
var chartArea = chart.chartArea();
chartArea.backColor = "#e2f0d9";

chartArea.border.color = "green";
chartArea.border.width = 3;
chartArea.border.dashStyle = GC.Spread.Sheets.Charts.LineType.dash;
chart.chartArea(chartArea);

// 设置数据系列颜色
var series = chart.series();
var seriesItem = series.get(0);
seriesItem.backColor = "#f15253";
seriesItem.backColorTransparency = 0.5;
series.set(0, seriesItem);

结果如下：

2、setDataSource

像传统Excel表格一样，SpreadJS支持用户填写数据，然后插入图表。除此之外，还支持数据绑定功能，通过对单元格进行字段绑定，然后setDataSource() 快速填充表格数据。

新建一个sheet , 在控制台中输入以下代码：

let sheet = spread.getActiveSheet()

复制下面的代码，在控制台中进行粘贴：

sheet.suspendPaint();
    var data = {
        budgetData : [
         {item: '广告费用',budget: 15260,actual: 14051},
         {item: '债务支出',budget: 12500,actual: 15000},
         {item: '福利费用',budget: 10000,actual: 9100},
         {item: '办公用品费用',budget: 8010,actual: 12000},
         {item: '租金',budget: 10008,actual: 8100},
         {item: '销售费用',budget: 16500,actual: 17630},
         {item: '税费',budget: 12335,actual: 9937},
         {item: '水电费',budget: 12400,actual: 13370},
         {item: '其他费用',budget: 8500,actual: 10430},
         {item: '总费用',budget: 105513,actual: 109618}
        ]
    };
    var tableColumns = [],
        names = ['item', 'budget', 'actual'],
        labels = ['项目', '预算', '实际'];
    var table = sheet.tables.add('tableRecords', 0, 0, 11, 3);
    table.autoGenerateColumns(false);
    names.forEach(function (name, index) {
        var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
        tableColumn.name(labels[index]);
        tableColumn.dataField(name);
        tableColumns.push(tableColumn);
    });
    table.bindColumns(tableColumns);
    table.bindingPath('budgetData');
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
    sheet.setDataSource(source);
    sheet.resumePaint();

结果如下：

在上述代码中，我们可以从http请求中获取后端发给前端的数据data。第二步创建table ，绑定字段。第三步setDataSource()绑定数据源。

数据准备好之后，我们可以按照上面提到的代码方式添加图表

sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.barClustered, 0, 300, 800, 400, "A1:C10")

结果如下：

接下来调整样式

let chart= sheet.charts.get('Chart1')
//设置图表标题
var title = chart.title();
title.text = "预算与实际费用";
chart.title(title);
// 设置数据系列颜色
var series = chart.series();
var seriesItem1 = series.get(0);
seriesItem1.backColor = "#ff885b";
seriesItem1.gapWidth = '1.22'
series.set(0, seriesItem1);
var seriesItem2 = series.get(1);
seriesItem2.backColor = "#27adb9";
seriesItem2.gapWidth = '1.22'
series.set(1, seriesItem2);

结果如下：

3、dataCharts

此功能将在SpreadJS V18.0 中发布，敬请期待。这个功能强大的新工具允许您将图表直接绑定到数据管理器数据，无需将数据存储在 SpreadJS 工作簿中。下面看看怎么设置吧。

1）创建数据源

在url中填写“https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json”

在数据路径中填写“data”

此时点击“列” 可以看到字段信息。

2）插入“数据图表” ，选择“折线图”

3）数据绑定，选择表

4）进行字段拖拽

我们以省为x轴，GDP总值为y轴。进行拖拽。结果如下：

至此，我们通过一个http链接，实现了插入一个图表。

最后

通过上述实践，我们成功在自定义应用中借助 SpreadJS 实现了图表制作功能的嵌入。无论是通过基础的单元格赋值，还是更为灵活的数据绑定，亦或是借助强大的dataCharts功能，都能高效地创建并定制图表。这不仅为用户带来了与 Excel 相似的便捷操作体验，还极大地提升了数据可视化的能力，满足了多样化的业务需求。

在实际应用场景中，如企业的数据分析与决策、政府部门的数据统计与管理，这种嵌入图表制作功能的表格应用发挥着重要作用。它能够将复杂的数据快速转化为直观易懂的图表，帮助相关人员迅速洞察数据背后的信息，做出更科学合理的决策。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、数据填报、类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：