数据可视化是用来展示数据趋势和模式的有用工具。如果没有直观的视觉效果中呈现的定量信息,就会浪费时间来理解数据的意义和重要性。

SpreadJS是一个类Excel的纯前端表格控件,允许您在不同的JavaScript框架中工作。SpreadJS以富有创意,富有洞察力和灵活性的方式显示数据。本教程演示了如何使用Vue中的SpreadJS添加图表和更改导入的电子表格。

在本教程中,我们将使用 VSCode 编辑和运行项目,以及在 Google Chrome 中调试和运行项目。点击了解如何设置VS Code以使用Google Chrome调试Vue项目

下载工程实例包

使用Vue应用中的SpreadJS创建图表

SpreadJS Vue安装

这是一个设置SpreadJS Vue项目的教程。我将详细介绍这个特定项目的具体步骤。首先,以管理员身份打开命令提示符,然后导航到您希望为项目创建的文件夹。

使用以下命令为Vue安装命令行界面:

npm install -global vue-cli

这是安装创建和运行Vue项目所需的库,现在你可以使用“vue init”来创建项目了:

vue init webpack SpreadJS-Vue-Project

开始创建项目,根据提示输入更多信息。大多数提示可以用“否”回答,如下所示:

使用Vue应用中的SpreadJS创建图表

创建项目后,可以通过NPM安装所需的Spread文件:

npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-charts

创建项目

为了方便组织,我将在项目的“src”文件夹中创建一个标有“components”的单独文件夹。在该文件夹中,创建一个包含此示例代码的Vue文件(在这种情况下,该文件将被称为“IncomeStatement.vue”)。

创建该文件和文件夹后,我们可以编辑“src”文件夹中的App.vue文件,将其定向到这个新文件:

 <template>
      <div id="app">
        <IncomeStatement/>
      </div>
    </template>

    <script>
    import IncomeStatement from './components/IncomeStatement'

    export default {
      name: 'App',
      components: {
        IncomeStatement
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    </style>

Income Statement 代码

要开始编写此页面的代码,我们可以添加模板和样式部分,模板是页面的实际结构。样式将是该模板中各部分的样式:

<template>
      <div class="financialKPI">
        <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='spreadInitHandle'>
        </gc-spread-sheets>
        <input type="file" class="fileSelect" @change='fileChange($event)' />
      </div>
    </template>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .spread-host {
        width: 100%;
        height: 500px;
        border: 1px solid lightgray;
      }

      .fileSelect {
        width: 100%;
        margin-top: 20px;
      }
    </style>

下一步是添加一个脚本标记,我们将为此示例编写所有代码。让我们首先通过NPM导入我们在项目中安装的CSS和脚本文件,以及设置我们的许可证密钥:

 <script>
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

      import '@grapecity/spread-sheets-vue'
      import * as GC from '@grapecity/spread-sheets'
      import Excel from '@grapecity/spread-excelio'
      import Charts from '@grapecity/spread-sheets-charts'

      GC.Spread.Sheets.LicenseKey = <YOUR LICENSE KEY HERE>;
    </script>

接下来,让我们在本地注册我们的组件:

 export default {
      name: 'IncomeStatement',
      data () {
        return {
          hostClass : 'spread-host'
        }
      }
    }

在数据部分之后,我们可以添加“methods”部分,在其中我们将定义初始化SpreadJS的“spreadInitHandle”函数,以及“fileChange”,我们的大部分代码将在其中进行:

 methods: {
      spreadInitHandle: function (spread) {
        this._spread = spread;
      },
      fileChange: function (e) {
        if (this._spread) {
          let fileDom = e.target || e.srcElement;
          let excelIO = new Excel.IO();
          let spread = this._spread;
        }
      }
    }

一旦在函数中初始化Spread,我们就可以在用户选择要在“fileChange”函数中加载到Spread中的文件时运行代码。我们将设置一些变量以便以后更容易访问,然后使用ExcelIO open函数将Excel文件加载到SpreadJS中:

 excelIO.open(fileDom.files[0], (data) => {
      spread.fromJSON(data);
      let sheet = spread.getSheet(1);
    })

在我正在使用的Excel文件中,我想在数据下方显示一个图表,但数据占用了大量的屏幕空间,因此我将对这些行进行分组和折叠,如下所示:

 sheet.rowOutlines.group(14, 2);
    sheet.rowOutlines.group(20, 6);
    sheet.rowOutlines.group(30, 3);
    sheet.rowOutlines.expand(0, false);

    sheet.addRows(38, 20);

现在我们已准备好添加图表,因此我们可以参考表格的收入区域的整个数据区域:

<pre> <code="language-javascript">
var chart = sheet.charts.add('RevenueChart', GC.Spread.Sheets.Charts.ChartType.columnClustered, 15, 600, 1600, 400, "E8:P12", GC.Spread.Sheets.Charts.RowCol.rows);
</code="language-javascript"> </pre>

我们可以快速设置图表的标题:

var title = chart.title();
    title.text = "Revenue";
    title.fontFamily = "Cambria";
    title.fontSize = 28;
    title.color = "#696969";
    chart.title(title);

创建图表的下一个也是最后一个任务是在图表中定义系列的名称。我们将通过单元格引用从工作表中获取。在这种情况下,我们选择的数据中有一个空行,不需要包含在图表中,因此我们可以删除该函数曲线(Series):

 var series = chart.series();
    series.remove(0);
    var productSeries = series.get(0);
    productSeries.name = "Sheet1!$B$10";
    var servicesSeries = series.get(1);
    servicesSeries.name = "Sheet1!$B$11";
    var otherSeries = series.get(2);
    otherSeries.name = "Sheet1!$B$12";
    chart.series().set(0, productSeries);
    chart.series().set(1, servicesSeries);
    chart.series().set(2, otherSeries);

使用Vue应用中的SpreadJS创建图表

这是在Vue应用中使用Spread.Sheets的简单示例,但您可以使用SpreadJS执行更多操作。通过添加Spread.Sheets Vue包,可以轻松地在Vue应用中添加Spread.Sheets。


SpreadJS | 下载试用

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、中通、民航飞行学院、浪潮等国内知名企业客户青睐。

您对SpreadJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛