アニメーション

データチャートのアニメーションは、チャートの視覚的な魅力を高め、データのプレゼンテーションをより魅力的でダイナミックなものにします。

GC.Spread.Sheets.DataCharts名前空間のIAnimationOptionインターフェイスを使用して、easing、scale、duration、startDelay などのアニメーションプロパティを設定します。これにより、ユーザーはデータチャートのアニメーション動作をカスタマイズできます。

さらに、AnimationEasing列挙体には、さまざまなアニメーション効果を作成するために使用できる定義済みのイージング関数のセットが用意されています。この列挙体に含まれる注目すべきイージング関数には、linear、swing、easeInOutBack、easeOutBounce などがあります。

種類

SpreadJS は、以下のアニメーションをサポートしています。

ホバーアニメーション

データポイントにマウスを合わせると、ホバーアニメーションがトリガーされます。折れ線チャート、レーダーチャート、散布図、またはバブルチャートのチャートシンボルにマウスを合わせると、ホバーアニメーションが開始されます。

ホバーアニメーション	サンプルプレビュー
データポイントにマウスを合わせる
チャートシンボルにマウスを合わせる

更新アニメーション

チャートが初めてレンダリングされ、データがチャートにバインドされ、チャートのサイズが変更されるときに、更新アニメーションがトリガーされます。

更新アニメーション	サンプルプレビュー
チャートが初めてレンダリングされるとき
データがチャートにバインドされるとき
チャートのサイズが変更されるとき

プロパティ

次は IAnimationOptionインターフェイスの主なプロパティです。

プロパティ	説明
duration	アニメーションの継続時間をミリ秒単位で設定します。
easing	アニメーションの種類を設定します。各イージングの違いは、時間の経過に伴うアニメーションの変化率です。
scale	データポイントのホバーアニメーションのスケールレートを設定します。このプロパティはホバーアニメーションでのみ機能し、スケール値は0より大きい必要があります。
startDelay	アニメーションとアクション間の遅延時間をミリ秒単位で設定します。このプロパティは更新アニメーションでのみ使用できます。このプロパティは、チャートを頻繁に更新する際のパフォーマンスの問題を回避するために使用されます。

コードの使用

次のサンプルコードは、データチャートでアニメーションを構成する方法を示しています。

このサンプルでは、データチャートの作成ページに記載されているsalesTableデータを使用しています。したがって、そのページに記載されている主要な手順に従ってデータチャートの設定を完了してください。完了したら、次のコードを使用してデータチャートのアニメーションを構成できます。さらに、特定のニーズに応じてデータソースをカスタマイズする柔軟性もあります。

//ホバーアニメーション
const sheet = spread.getSheet(0);
sheet.name("Hover Animation");
sheet.setValue(16, 0, "Hover Over the Data Chart");
sheet.setValue(16, 9, "Hover Over the Chart Symbol(Triangle)");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
      tableName: 'Sales',
      plots: [
          {
              type: GC.Spread.Sheets.DataCharts.DataChartType.column,
              encodings: {
                  values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                  category: { field: 'Product' },
                  color: { field: 'Product' },
              },
              config: {
                  //データポイントにマウスを合わせると、ホバーアニメーションがトリガーされます。
                  hoverAnimation: {   // IAnimationOption
                      duration: 600, // 数値（ミリ秒）
                      scale: 1.5,   // 数値（値は0より大きい必要があります）
                      easing: GC.Spread.Sheets.DataCharts.AnimationEasing.easeOutBack,  // GC.Spread.Sheets.DataCharts.AnimationEasing
                  },
              }
          }
      ]
});

//チャートシンボルにマウスを合わせる
const dataChart1 = sheet.dataCharts.add('data-chart-1', 560, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart1.setChartConfig({
      tableName: 'Sales',
      plots: [
          {
              type: GC.Spread.Sheets.DataCharts.DataChartType.line,
              config: {
                  //折れ線チャート、レーダーチャート、散布図、バブルチャートの場合
                  //チャートのシンボルにマウスを合わせると、ホバーアニメーションがトリガーされます。
                  hoverAnimation: {
                      duration: 600,
                      scale: 1.5,
                      easing: GC.Spread.Sheets.DataCharts.AnimationEasing.easeOutBounce,
                  },
                  style: {
                      symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.triangle,
                      symbolSize: 15,
                  },
                  symbols: true,
              },
              encodings: {
                  values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                  category: { field: 'Product' },
              }
          }
      ]
});


//更新アニメーション
const sheet1 = spread.getSheet(1);
const spreadNS = GC.Spread.Sheets;
sheet1.name("Update Animation");
sheet1.setColumnWidth(0, 150);
sheet1.setRowHeight(18, 35);
sheet1.setValue(1, 7, "Resize the Chart To Show the Animation");
sheet1.setValue(17, 0, "Setting the Encoding Color will trigger the Update Animation");
sheet1.setValue(19, 0, "The update animation will be triggered when the chart is first rendered, binding data into chart and resizing.");
var b0 = new GC.Spread.Sheets.CellTypes.Button();
b0.text("Set Encoding Color");
sheet1.setCellType(18, 0, b0, spreadNS.SheetArea.viewport);

const dataChart3 = sheet1.dataCharts.add('data-chart-3', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
      tableName: 'Sales',
      plots: [
          {
              type: GC.Spread.Sheets.DataCharts.DataChartType.column,
              config: {
                  updateAnimation: {
                      duration: 600,
                      startDelay: 1000, // 数値 (ミリ秒)) //このプロパティは更新アニメーションでのみ機能します。
                      easing: GC.Spread.Sheets.DataCharts.AnimationEasing.easeOutBounce,
                  },
              },
              encodings: {
                  values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                  category: { field: 'Product' },
              }
          }
      ]
});

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, (sender, args) => {
      if (args.sheetName === "Update Animation" && args.row === 18 && args.col === 0) {
          //チャートの設定を取得します。
          let config = dataChart3.getChartConfig();
          //エンコーディング色を追加します。
          config.plots[0].encodings.color = { field: 'Product' };
          //チャート構成を設定します。
          dataChart3.setChartConfig(config);  //これにより更新アニメーションがトリガーされます。
      }
})