折线图

此代码显示如何在折线图中添加组合图。折线图被广泛用于在均匀缩放的轴上可视化随时间变化的连续数据。 这些图表非常适合以相等的时间间隔（例如月份，季度或会计年度）分析数据趋势。

可以在折线图中绘制表单的列或行中排列的数据。 在折线图中，类别数据沿水平轴均匀分布，所有值数据均沿垂直轴分布。

SpreadJS支持以下类型的折线图。 在下面显示的示例中，不同类型的折线图描绘了不同类别的小工具（手机，笔记本电脑和平板电脑）的第一季度，第二季度和第三季度的年度销售记录趋势。

• 折线图 此图表描绘了随时间绘制的数据值以显示趋势。 折线图的图像如下所示：
• 堆积折线图 该图显示堆积线，以描述每个数据值或有序类别在不同时间间隔内的贡献趋势。堆积线图的图像如下图所示：
• 百分比堆积折线图 此图表显示了每个数据值或有序类别在不同时间间隔内所占（总体）百分比的趋势。 百分比堆积线形图的图像如下所示：
• 数据点折线图 此图表显示带有标记的数据值。 当类别很多或值是近似值时，最好使用此图表。 带有标记的折线图的图像如下所示：
• 数据点堆积折线图 此图表显示带有标记的数据值，通常显示每个值对时间或类别均匀分布的贡献趋势。 带有标记的堆叠式折线图的图像如下所示：
• 数据点百分比堆积折线图 此图表显示带有标记的单个数据值，通常显示每个值随时间或类别均匀分布所占百分比的趋势。 当类别很多或值是近似值时，最好使用此图表。 下图显示了数据点百分比堆积折线图：

示例代码

此代码显示了如何在表单中添加不同类型的折线图。

var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();
// 准备数据
 sheet.setValue(0, 1, "Q1");
sheet.setValue(0, 2, "Q2");
sheet.setValue(0, 3, "Q3");
sheet.setValue(1, 0, "Mobile Phones");
sheet.setValue(2, 0, "Laptops");
sheet.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++)
{
  for (var c = 1; c <= 3; c++)
  {
   sheet.setValue(r, c, parseInt(Math.random() * 100));
  }
}
// 添加折线图
chart_line = sheet.charts.add('chart_line', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, "A1:D4");
// 添加堆积折线图
chart_lineStacked = sheet.charts.add('chart_lineStacked', GC.Spread.Sheets.Charts.ChartType.lineStacked, 250, 480, 600, 400, "A1:D4");
// 添加百分比堆积折线图
chart_lineStacked100 = sheet.charts.add('chart_lineStacked100', GC.Spread.Sheets.Charts.ChartType.lineStacked100, 250, 900, 600, 400, "A1:D4");
sheet.resumePaint();
};