用DevExpress的WebChartControl实现的一个饼图

最新推荐文章于 2024-05-07 13:23:53 发布

原创最新推荐文章于 2024-05-07 13:23:53 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#dataset #assembly #filter #server #exception #xhtml

本文介绍使用 DevExpress 的 WebChartControl 控件创建饼图的过程，并提供了详细的代码示例。通过设置系列模板、标签类型及图表视图等属性，实现了特定需求的数据展示。

最近用DevExpress的WebChartControl来实现的一些2D的图表感觉挺好用的。下面就是用这个控件实现的一个饼图，看一下效果：

用这控件实现简单，效果也看到了。啥也不说了，贴代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Visit_UserList_Chart.aspx.cs" Inherits="Visit_UserList_Chart" %> <%@ Register Assembly="DevExpress.Xpo.v8.1" Namespace="DevExpress.Xpo" TagPrefix="dxxpo" %> <%@ Register Assembly="DevExpress.XtraCharts.v8.1.Web" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %> <%@ Register Assembly="DevExpress.XtraCharts.v8.1" Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>服务器访问图表</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body,td,th { font-family: 宋体; font-size: 12px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }</style> <mce:script language="JavaScript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <div style=" margin-left:4px; margin-top:3px;" mce_style=" margin-left:4px; margin-top:3px;"> <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="987px" Height="400px"> <SeriesTemplate LabelTypeName="SideBySideBarSeriesLabel" PointOptionsTypeName="PointOptions" SeriesViewTypeName="SideBySideBarSeriesView"> <View HiddenSerializableString="to be serialized"> </View> <Label HiddenSerializableString="to be serialized"> <FillStyle FillOptionsTypeName="SolidFillOptions"> <Options HiddenSerializableString="to be serialized" /> </FillStyle> </Label> <PointOptions HiddenSerializableString="to be serialized"> </PointOptions> <LegendPointOptions HiddenSerializableString="to be serialized"> </LegendPointOptions> </SeriesTemplate> <FillStyle FillOptionsTypeName="SolidFillOptions"> <Options HiddenSerializableString="to be serialized" /> </FillStyle> </dxchartsui:WebChartControl> </div> </div> </form> </body> </html>

private void createPieChart(DataSet ds) { try { // Create a pie series and add series to the chart. Series series1 = new Series("Pie Series 1", ViewType.Pie); //pieChart.Series.Add(series1); WebChartControl1.Series.Add(series1); // Specify scale types and add points to the series. series1.ArgumentScaleType = ScaleType.Qualitative; series1.ValueScaleType = ScaleType.Numerical; for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { string name = ds.Tables[0].Rows[i]["countryName"].ToString(); double value = Convert.ToDouble(ds.Tables[0].Rows[i]["value"].ToString()); series1.Points.Add(new SeriesPoint(name, new double[] { value })); } // Specify a data filter to explode points. SeriesPointFilter filter = new SeriesPointFilter(SeriesPointKey.Value_1, DataFilterCondition.GreaterThanOrEqual, 10); ((PieSeriesView)series1.View).ExplodedPointsFilters.Add(filter); ((PieSeriesView)series1.View).ExplodeMode = PieExplodeMode.UseFilters; // Specify how series points are located in a pie. series1.SeriesPointsSorting = SortingMode.Ascending; series1.SeriesPointsSortingKey = SeriesPointKey.Value_1; ((PieSeriesView)series1.View).Rotation = 90; // Specify label behavior. ((PieSeriesLabel)series1.Label).Position = PieSeriesLabelPosition.TwoColumns; ((PiePointOptions)series1.PointOptions).PointView = PointView.ArgumentAndValues; // Add a chart to the form. //pieChart.Size = new System.Drawing.Size(400, 250); } catch(Exception e) { Console.Write(e.Message); } } public DataSet getDataTest2() { DataSet ds = new DataSet(); DataTable dt = new DataTable(); DataRow dr; //新增三列 DataColumn colItem0 = new DataColumn("id", Type.GetType("System.Int32")); DataColumn colItem1 = new DataColumn("countryName", Type.GetType("System.String")); DataColumn colItem2 = new DataColumn("value", Type.GetType("System.Double")); //将他们添加到DataTable中 dt.Columns.Add(colItem0); dt.Columns.Add(colItem1); dt.Columns.Add(colItem2); for (int i = 0; i < 5; i++) { //循环List给DataTable的每一行赋值 dr = dt.NewRow(); dr["id"] = 0; switch (i) { case 0: dr["countryName"] = "USA"; dr["value"] = 9.6; break; case 1: dr["countryName"] = "Canada"; dr["value"] = 10; break; case 2: dr["countryName"] = "Russia"; dr["value"] = 17.1; break; case 3: dr["countryName"] = "China"; dr["value"] = 9.6; break; case 4: dr["countryName"] = "Brazil"; dr["value"] = 8.5; break; } dt.Rows.Add(dr); } //将该DataTable添加到DataSet中 ds.Tables.Add(dt); return ds; }