[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
デモ ヘルプ APIリファレンス デザイナ
ダウンロード
(Showing Draft Content)

チャート内でのアニメーション

Spread.Sheetsでは、チャート内でアニメーションを使用できます。これにより、ユーザーはデータに対して動的な対話的操作を行え、スプレッドシートの視覚効果を高めることができます。また、チャート内でアニメーションを使用することで、ワークシートの行および列にプロットされた情報から傾向をすばやく特定し、分析および操作することができます。

例

例として、いくつかの地理的地域に対する月間降雨量データがあるとします。ある特定の月において、降雨量の最も高い国と最も最も低い国とを比較します。このようなデータがプロットされたスプレッドシートに基づいてチャートを作成すると、多数の行や列から個々の数字を精査するより、はるかに簡単に情報を読み取り、操作し、分析することができます。さらに、このチャートにアニメーションを追加すると、リアルタイムでデータを視覚化でき、一段と利便性が高まります。この結果、情報に基づく判断を迅速に、かつ効率的に下すことができます。

次の図に示すように、必要に応じて、既存のアニメーションをワークシートに追加できます。

Load_Animation

下図に示すように、データを動的に変更することで、ワークシートのアニメーションを更新できます。これにより、情報の傾向をリアルタイムで特定できます。

Update_Animation

コードの使用

次のサンプルコードは、チャート内でアニメーションを使用します。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();var dataArray = 
  [
                ["", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                ["東京", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                ["ニューヨーク", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
                ["ロンドン", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
                ["ベルリン", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  ];sheet.setArray(0, 0, dataArray);// 集合縦棒チャート（columnClustered）を追加します。chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 300, 180, 600, 400, "A1:M5");
           
// チャート内でアニメーションを使用します。
chart_columnClustered.useAnimation(true);// チャートのタイトルを設定します。
var title = chart_columnClustered.title()
title.fontSize = "24.00";
title.color = "rgb(228,65,54)";
title.text = '月平均降雨';
chart_columnClustered.title(title);sheet.resumePaint();

注意： Spread.Sheetsでは、4種類のチャート（縦棒チャート、横棒チャート、折れ線チャート、円チャート）のみでアニメーションがサポートされます。レーダーチャート、ツリーマップチャート、サンバーストチャート、株価チャート、複合チャート、面チャート、散布図など、その他のチャートでは、現時点ではアニメーション機能はサポートされません。