Shape要素

ReactでShape要素を使用すると、ワークシートに正方形、円、長方形、三角形、五角形、六角形、八角形などのような幾何学的シェイプをすばやく簡単に埋め込んでレンダリングできます。

Reactアプリを作成する

コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

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

コマンドを実行すると、ディレクトリ内の指定の場所にReactプロジェクトが作成されます。Reactプロジェクトの詳しい作成方法については、https://reactjs.org/docs/add-react-to-a-new-app.htmlを参照してください。

プロジェクトにSpread.Sheets Reactモジュールをインストールする

Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。

npm install @grapecity/spread-sheets-react
npm install @grapecity/spread-sheets-resources-ja

スタイルをインポートする
index.jsファイルで、スタイルファイルをインポートします。

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
プロジェクトでシェイプのReactモジュールをインストールする
次のコマンドを使用して、プロジェクトにシェイプのモジュールをインストールする必要があります。

npm install @grapecity/spread-sheets-shapes

Reactアプリケーションでチャートを使用する

必要に応じてApp.jsファイルを変更できます。ブラウザウィンドウが更新されると、変更が反映されます。次のサンプルコードを使用します。

次のサンプルコードは、Reactアプリケーションでシェイプを使用する方法を示します。

JavaScript	Copy Code
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-shapes'; var SpreadJSKey = "xxx"; GC.Spread.Sheets.LicenseKey = SpreadJSKey; class App extends React.Component { constructor(props) { super(props); this.hostStyle = { width: '1100px', height: '800px' }; } // ワークブックのinitializedイベントを処理します。 workbookInit = (spread) => { this.setState({ spread: spread }); // シートを取得します。 let sheetShape = spread.getSheet(0); // シート名を設定します。 sheetShape.name("Shapes"); sheetShape.suspendPaint(); // 組み込みシェイプ「ドーナツ」を追加します。 var donutShape = sheetShape.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 50, 50, 150, 150); // 組み込みシェイプ「ドーナツ」にテキストを追加します。 donutShape.text("Donut Shape"); // 組み込みシェイプ「ドーナツ」にスタイルを追加します。 var shapeStyle = donutShape.style(); shapeStyle.textEffect.color = "Red"; shapeStyle.textEffect.font = "18px Arial"; shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center; shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center; donutShape.style(shapeStyle); sheetShape.resumePaint(); } render() { return ( <div> <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}> <Worksheet> </Worksheet> </SpreadSheets> </div> ) } } export default App;

JavaScript

Copy Code

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-shapes';

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

class App extends React.Component

{
constructor(props)

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

// ワークブックのinitializedイベントを処理します。
workbookInit = (spread) =>

{
this.setState({
spread: spread
});

// シートを取得します。
let sheetShape = spread.getSheet(0);

// シート名を設定します。
sheetShape.name("Shapes");
sheetShape.suspendPaint();

// 組み込みシェイプ「ドーナツ」を追加します。
var donutShape = sheetShape.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 50, 50, 150, 150);

// 組み込みシェイプ「ドーナツ」にテキストを追加します。
donutShape.text("Donut Shape");

// 組み込みシェイプ「ドーナツ」にスタイルを追加します。
var shapeStyle = donutShape.style();
shapeStyle.textEffect.color = "Red";
shapeStyle.textEffect.font = "18px Arial";
shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
donutShape.style(shapeStyle);

sheetShape.resumePaint();

}
render()

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

export default App;