Spread for ASP.NET基础教程-图表

Spread支持 85 种丰富多彩的图表效果。基于工作表的数据直接生成图表,操作简单。本片文章中即将向您介绍 Spread 图表的使用方法:

发布于 2015/04/18 00:00

SpreadJS

Spread支持 85 种丰富多彩的图表效果。基于工作表的数据直接生成图表,操作简单。本片文章中即将向您介绍 Spread 图表的使用方法:

1.设置数据源

DataTable dt = new DataTable("Test");
DataRow dr = default(System.Data.DataRow);
dt.Columns.Add("名称");
dt.Columns.Add("数量");
dr = dt.NewRow();
dr[0] = "电器";
dr[1] = 0.2;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "服装";
dr[1] = 0.5;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "家具";
dr[1] = 0.3;
dt.Rows.Add(dr);

 

2.设置 BarSeries

FarPoint.Web.Chart.BarSeries series = new FarPoint.Web.Chart.BarSeries();
//设置图表展示数据
series.Values.DataSource = dt;
series.Values.DataField = dt.Columns[1].ColumnName;
//使用多样化颜色显示
series.VaryColors = true;
//设置 X 轴显示名称
series.CategoryNames.Add("电器");
series.CategoryNames.Add("服装");
series.CategoryNames.Add("家具");
series.LabelVisible = true;

 

3.设置 YPlotArea

FarPoint.Web.Chart.YPlotArea plotArea = new FarPoint.Web.Chart.YPlotArea();
//设置显示单位为 20%
  
plotArea.YAxes[0].DisplayUnits = 0.5;
//设置 Y 轴显示为 Percentage
plotArea.YAxes[0].LabelNumberFormat = "00.0%";
//设置 YPlotArea 显示位置
plotArea.Location = new System.Drawing.PointF(0.2F, 0.2F);
//设置 YPlotArea 大小
plotArea.Size = new System.Drawing.SizeF(0.6F, 0.6F);
plotArea.Series.Add(series);

 

4.设置图例

LegendArea legend = new LegendArea();
legend.Location = new PointF(0.98f, 0.5f);
legend.AlignmentX = 1.0f;
legend.AlignmentY = 0.5f;

 

5.设置标签

LabelArea label = new LabelArea();
label.Text = "产品分布";
label.Location = new PointF(0.5f, 0.02f);
label.AlignmentX = 0.5f;
label.AlignmentY = 0.0f;

 

6.最后,在 WebConfig 文件中添加以下信息:

<httpHandlers>
   <add path="FpChart.axd" verb="*" type="FarPoint.Web.Chart.ChartImageHttpHandler" validate="true" />
</httpHandlers>

 

image

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

如下资源列表,可以为您评估产品提供帮助:

相关产品
推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态