SpreadJS 文档
SpreadJS 文档 / 开发者指南 / JavaScript 框架 / 在React中使用SpreadJS /图表标题
在本主题中
    图表标题
    在本主题中

    使用SpreadJS和React中的图表功能,您可以可视化应用程序的数据,同时使所有图表元素与本机数据绑定支持保持同步。

    1. 创建一个React项目

      打开命令提示符窗口,然后键入以下命令:

      npm install -g create-react-app
      create-react-app quick-start
      cd quick-start
      npm start

      完成后,将在目录中的指定位置创建react项目。 有关如何创建React项目的更多信息,请参阅 https://reactjs.org/docs/create-a-new-react-app.html

    2. 在项目中下载SpreadJS React模块

      接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react:

      npm install @grapecity/spread-sheets-react
             
    3. 将SpreadJS CSS导入index.js文件

      接下来,您需要使用以下代码将SpreadJS CSS导入index.js文件中:

      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
             
    4. 在项目中安装Charts React模块

      接下来,您需要使用以下命令在项目中安装图表模块:

      npm install @grapecity/spread-sheets-charts

    5. 在React应用程序中使用图表

      现在,您可以根据需要修改App.js文件。 刷新浏览器窗口时,更改将反映出来。 例如,您可以使用下面给出的示例代码:

      这个例子展示了如何在React应用程序中使用图表。

      JavaScript
      复制代码

      import React from 'react';
      import './App.css';
      import GC from '@grapecity/spread-sheets';
      import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

      // 导入图表模块
      import '@grapecity/spread-sheets-charts';

      var SpreadJSKey = "xxx";
      GC.Spread.Sheets.LicenseKey = SpreadJSKey;

      class App extends React.Component

      {
          constructor(props)

      {
              super(props);
              this.hostStyle =
                  {
                      width: '1100px',
                      height: '800px'
                  };
       }

      // 处理工作簿初始化事件
      workbookInit = (spread) =>

      {
              this.setState({
                  spread: spread});
      let chart_columnClustered, chart_columnStacked, chart_columnStacked100;

      // 获取表单
      let sheetCharts = spread.getSheet(0);

      // 设置表单名称
      sheetCharts.name("Charts");
      sheetCharts.suspendPaint();

      //准备图表数据
      sheetCharts.setValue(0, 1, "Q1");
      sheetCharts.setValue(0, 2, "Q2");
      sheetCharts.setValue(0, 3, "Q3");
      sheetCharts.setValue(1, 0, "Mobile Phones");
      sheetCharts.setValue(2, 0, "Laptops");
      sheetCharts.setValue(3, 0, "Tablets");
      for (var r = 1; r <= 3; r++)

      {
           for (var c = 1; c <= 3; c++) {
           sheetCharts.setValue(r, c, parseInt(Math.random() * 100));
      }
      }

       // 添加列聚簇图
      chart_columnClustered = sheetCharts.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 5, 150, 300, 300, "A1:D4");
      chart_columnClustered.title({ text: "Annual Sales" });

      // 添加列堆积图
      chart_columnStacked = sheetCharts.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 320, 150, 300, 300, "A1:D4");
      chart_columnStacked.title({ text: "Annual Sales" });

      // 添加百分比列堆积图
      chart_columnStacked100 = sheetCharts.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 640, 150, 300, 300, "A1:D4");
      chart_columnStacked100.title({ text: "Annual Sales" });

      sheetCharts.resumePaint();
      }

      render() {
      return (
      <div>
      <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
      <Worksheet>
      </Worksheet>
      </SpreadSheets>
      </div>
      )
      }
      }

      export default App;