Chart要素

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/add-react-to-a-new-app.htmlを参照してください。

   
   

   
   

2. Spread.Sheetsモジュールをインストールする

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

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

   
   

   
   

3. スタイルをインポートする

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

   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

   
   

   
   

4. プロジェクトでチャートのReactモジュールをインストールする

   次のコマンドを使用して、プロジェクトにチャートのモジュールをインストールする必要があります。

   npm install @grapecity/spread-sheets-charts

   
   

   
   

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

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

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

   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'
               };
    }// ワークブックのinitializedイベントを処理します。
   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));
   }
   } // columnClusteredチャートを追加します。
   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" });// columnStackedチャートを追加します。
   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" });// columnStacked100チャートを追加します。
   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;