WPF中嵌套charts图表查询数据

Posted 2022-11-28 weixin_44543308

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：WPF 、Charts

撰写日期：2020年09月16日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  之前使用Echarts图表时都是在MVC中引入Echarts插件，才能使用Echarts图表，那么现在来看下在WPF中是如何使用Chart图表的，同样的也要引用一下Charts应用程序扩展，如下：

 

引用之后，想要实现Charts图表数据查询同样要三步骤组成：1、数据库编写、2、服务端编写、3、客户端编写

一、数据库方法：

------------ 查询销售漏斗统计

  IF(@type='UserControl_SelectSales')

  BEGIN

    SELECT  ROW_NUMBER () over (order by PW_State.StateName)  AS number,---序号

    RTRIM(PW_State.StateName) AS StateName,--状态类型

    COUNT(StateName) AS sum

        FROM   PW_State INNER JOIN 

               PW_Market ON PW_State.StateID = PW_Market.StateID

GROUP BY StateName

ORDER BY   cast(COUNT(StateName) as int ) DESC

  END

• 服务端编写代码如下：

//操作契约

        [OperationContract]

        //查询销售漏斗统计

        public DataSet UserControl_SelectSales()

        SqlParameter[] mySelectSales =

                new SqlParameter("@type",SqlDbType.Char),;

             mySelectSales[0].Value = "UserControl_SelectSales";

         DataTable myDataTable = myDAL.QueryDataTable("SalesStatistics", mySelectSales);

DataSet myDataSet = new DataSet();

         myDataSet.Tables.Add(myDataTable); // 添加参数

 return myDataSet; // 返回值

• 客户端代码又分两部分：一、查询出你要统计数数据 二、编写Charts图表代码

1. 、查询数据代码：

      //销售统计

            DataTable dt = myClient.UserControl_SelectSales().Tables[0];

            //实例化【X轴】和【Y轴】

            List<string> strx = new List<string>();

            List<string> stry = new List<string>();

            for (int i = 0; i < dt.Rows.Count; i++)

            

                strx.Add(dt.Rows[i]["StateName"].ToString().Trim());//赋值X轴的字段名

                stry.Add(dt.Rows[i]["sum"].ToString().Trim());//赋值Y轴的字段名

            

            CreateChartColumn("销售统计", strx, stry); //标题

1. 、Charts图表代码：（每一句都有详细的解释）

 //饼状图

 private void CreateChartColumn(string name, List<string> valuex, List<string> valuey)

        

            //（1）创建一个图表

            Chart chart = new Chart();

            //(2) 基本属性

            //设置图标的宽度和高度

            chart.Width = 500;

            chart.Height = 250;

            chart.Margin = new Thickness(-550, -300, 0, 0);

            //是否启用打印和保持图片

            chart.ToolBarEnabled = true;

            //设置图标的属性

            chart.ScrollingEnabled = false;//是否启用或禁用滚动

            chart.View3D = true;//3D效果显示

            //(1)创建一个标题的对象

            Title title = new Title();

            //设置标题的名称

            title.Text = name;

            title.Padding = new Thickness(0, 10, 5, 0);

            //向图标添加标题

            chart.Titles.Add(title);

            //(2)创建轴

            Axis yAxis = new Axis();

            //设置图标中Y轴的最小值永远为0

            yAxis.AxisMinimum = 0;

            //设置图表中的Y轴的后缀

            yAxis.Suffix = "个";

            chart.AxesY.Add(yAxis);

            //创建一个新的数据线

            DataSeries dataSeries = new DataSeries();

            dataSeries.RenderAs = RenderAs.Doughnut;

            //设置数据点

            DataPoint dataPoint;

            for (int i = 0; i < valuex.Count; i++)

             //创建一个数据点的实例

                dataPoint = new DataPoint();

                //设置X轴点

                dataPoint.AxisXLabel = valuex[i];

                //设置Y轴点

                dataPoint.YValue = double.Parse(valuey[i]);

                //添加数据点

                dataSeries.DataPoints.Add(dataPoint);

            //添加数据线到数据序列

            chart.Series.Add(dataSeries);

            //将生产的图表增加到Grid，然后通过Grid添加到上层Grid

            Grid gr = new Grid();

            gr.Children.Add(chart);

            Simon.Children.Add(gr);

private void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        

            DataPoint dp = sender as DataPoint;

            MessageBox.Show(dp.YValue.ToString());

如果你想要其它形状的Charts图表的话也是可以实现的，如：Column = 列，Line = 行，Pie = 派，Bar = 酒吧（柱状图），Area = 面积，Doughnut = 甜甜圈（饼状图）,StackedColumn = 堆叠列，StackedColumn100  = 堆叠柱状100，StackedBar = 堆叠条，StackedBar100 堆叠杠100，StackedArea = 堆积面积，StackedArea100 = 堆叠面积100，Bubble = 泡沫，Point = 点，StreamLineFunnel = 流线漏斗，SectionFunnel = 截面漏斗，Stock = 股票，CandleStick = 烛台，StepLine = 步长，Spline = 花键，Radar = 雷达，Polar = 极地，Pyramid = 金字塔，QuickLine = 快线，

只要在 设置数据线的格式那换上以上的样式就可以实现的了，其它都不变， 

dataSeries.RenderAs = RenderAs.Radar;（标红色字体这）。

最后结果图如下：

 

你点击上图的任何一种颜色它都会显示出它对应的数据来还有所占比例。