图表的动画

SpreadJS提供了在图表中使用动画的支持，以便使用户能够与数据动态交互并在使用表单时增强可视化效果。 除此之外，在图表中使用动画还可以帮助用户从表单的行和列中绘制的信息中快速识别，分析和处理趋势。

示例

例如，让我们以一个场景为例，其中您具有多个地理区域的月降雨量数据，并且需要比较哪个国家在特定月份中出现最高和最低降雨量的国家。 当在表单中绘制此类数据并创建图表时，读取和操作信息将比遍历大量行和列进行信息分析变得更加容易。 此外，如果还向图表中添加了动画，则可以更加方便地实时可视化数据并快速有效地做出明智的决策。

您可以根据需要在表单中添加现有动画，如下图所示。

您还可以通过动态变更数据以实时识别趋势来更新表单中的动画，如下图所示。

代码

以下示例代码显示了如何在图表中使用动画。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataArray = 
[
            ["", 'Jan', 'Feb', 'Mar',
            'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0,
              135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 
              105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
            ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3,
              59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
            ["Berlin", 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 = 'AVERAGE MONTHLY RAINFALL';
chart_columnClustered.title(title);
sheet.resumePaint();

SpreadJS仅在四种图表类型中支持动画-柱形图，条形图，折线图和饼图。 到目前为止，所有其他类型的图表（例如，雷达图，树形图，森伯斯特图，股票图，组合图，面积图和散点图）均不支持动画功能。

注意: SpreadJS仅在四种图表类型中支持动画-柱形图，条形图，折线图和饼图。 到目前为止，所有其他类型的图表（例如，雷达图，树形图，森伯斯特图，股票图，组合图，面积图和散点图）均不支持动画功能。