Chart元素

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

• 创建一个React项目 打开命令提示符窗口，然后键入以下命令： 完成后，将在目录中的指定位置创建react项目。 有关如何创建React项目的更多信息，请参阅https://reactjs.org/docs/create-a-new-react-app.html
• 在项目中下载SpreadJS React模块 接下来，您需要使用以下命令在项目中安装 @grapecity-software/spread-sheets-react：
• 将SpreadJS CSS导入index.js文件 接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：
• 在项目中安装Charts React模块 接下来，您需要使用以下命令在项目中安装图表模块：
• 在React应用程序中使用图表 现在，您可以根据需要修改App.js文件。 刷新浏览器窗口时，变更将反映出来。 例如，您可以使用下面给出的示例代码： 这个例子展示了如何在React应用程序中使用图表。

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

                            // 导入图表模块
                            import '@grapecity-software/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;