网站专题设计稿数据分析网页

代码太多了我就不展示了，贴一些比较有代表性的

成品效果展示：

 简单说一下我的思路 

\

先把Excel数据展示在dataGridView控件上

XLIST 为 X轴的数据

XLIST 为 Y轴的数据

ZLIST 为 展示的数据进行数据处理点击展示即可

// 将Excel数据复制到DataTable
DataTable dataTable = new DataTable();private List<string> XList = new List<string>();
private List<double> YList = new List<double>();
private List<double> ZList = new List<double>();series.ChartType = SeriesChartType.Column;   // 柱状图
series.ChartType = SeriesChartType.Line;     // 折线图 && (趋势图 SORT Y 轴)
series.ChartType = SeriesChartType.Bar;      // 横条图
series.ChartType = SeriesChartType.BoxPlot;  // 箱线图//切换主窗导致卡顿解决方案private void Form1_Resize(object sender, EventArgs e){//当主窗体变更大小时解决多控件加载卡顿//重置窗口布局//在窗体加载时候  解决闪烁问题//将图像绘制到缓冲区 减少闪烁this.DoubleBuffered = true;//设置本窗体SetStyle(ControlStyles.UserPaint, true);SetStyle(ControlStyles.AllPaintingInWmPaint, true); // 禁止擦除背景.SetStyle(ControlStyles.DoubleBuffer, true); // 双缓冲}//打开文件路径获取Excel数据至dataGridView
string excelFilePath = textBox1.Text;
//使用方式：引用 Microsoft.Office.Interop.Excel 调用Excel读取
//优点：不受Excel版本限制，可指定sheet读取
//缺点：读取速度慢，几千数据10分钟
//ExcelToDataGridView.FillDataGridViewFromExcel(excelFilePath, dataGridView1);
// 方式一 OLEDB读取 数据库引擎
// 优点：读取速度快，依据sheet排序读取
// 缺点：对于Excel版本依赖强，无法读取指定sheet
// 错误提示：本地计算机未指定 Microsoft.ACE.OLEDB.12.0
// 解决方法：win7(64位) + office 2010(64位) 更改目标平台为X86
// win10(64位) + office 2010(64位) 更改目标平台无效，下载安装AccessDatabaseEngine.exeif (String.IsNullOrEmpty(textBox1.Text)){//空不调用}else{dataTable = ReadExcelFile(excelFilePath);}private DataTable ReadExcelFile(string excelFilePath){string connectionString = $"Provider=Microsoft.ACE.OLEDB.12.0;Data Source= {excelFilePath};Extended Properties=\"Excel 12.0 Xml;HDR=YES;\"";using (OleDbConnection conn = new OleDbConnection(connectionString)){conn.Open();OleDbCommand cmd = new OleDbCommand("SELECT * FROM [Sheet1$]", conn);OleDbDataAdapter adapter = new OleDbDataAdapter(cmd);DataTable dataTable = new DataTable();adapter.Fill(dataTable);return dataTable;}}//设定折线图均值
addLateline(chart1, max, "最大值");
addLateline(chart1, roundedAverage, "平均值");
addLateline(chart1, min, "最小值");private void addLateline(Chart chart, double y, string name)
{//chart.ChartAreas[0].AxisX.StripLines.Clear();StripLine stripline = new StripLine();//stripline.Interval = 1;       //重复的次数 stripline.IntervalOffset = y;   //横线y轴位置stripline.Text = name + ":" + y;stripline.TextOrientation = TextOrientation.Horizontal;stripline.TextAlignment = StringAlignment.Near; // 文本左对齐stripline.StripWidth = 0.15;    //线宽度if (name != "平均值"){ stripline.BackColor = System.Drawing.Color.Red; }else{ stripline.BackColor = System.Drawing.Color.Blue; }stripline.BorderDashStyle = ChartDashStyle.Solid;     //实线chart.ChartAreas[0].AxisY.StripLines.Add(stripline);  //横线//chart.ChartAreas[0].AxisX.StripLines.Add(stripline);//竖线chart.ChartAreas[0].AxisY.MinorGrid.Enabled = true; // 启用Y轴次刻度线chart.ChartAreas[0].AxisY.MajorTickMark.Size = 2; // 设置Y轴主刻度线大小chart.ChartAreas[0].AxisY.MinorTickMark.Size = 1;  // 设置Y轴次刻度线大小chart.ChartAreas[0].AxisY.MinorGrid.LineDashStyle = ChartDashStyle.Dot; // 设置Y轴次刻度线的样式chart.ChartAreas[0].AxisY.MinorGrid.LineColor = System.Drawing.Color.LightGray; // 设置Y轴次刻度线的颜色// 开启数据点标签的显示}//开启X轴的左右拖拽
chart1.ChartAreas[0].AxisX.ScaleView.Size = 10; // 设置了 X 轴上显示的数据点的数量
chart1.ChartAreas[0].AxisX.ScaleView.MinSize = 5; // 设置或获取X轴的视图的最小尺寸
chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false; // 滚动条位于图表外侧// 折线图获取不同的随机颜色
bool flag = false;
System.Drawing.Color randomColor;while (true)
{randomColor = ColorHelper.GetRandomColor();for (int i = 0; i < YList.Count / XList.Count; i++){if (chart1.Series[i].Color == randomColor){flag = false;break;}else{                                                                    flag = true;series.Color = randomColor;break;}}if ( flag == true){break;}
};series.ChartType = SeriesChartType.Line;
System.Drawing.Color seriesColor = GetSeriesColor(chart1, series.Name);//箱线图的计算逻辑//这个就不把代码带出来了 自己算一算就行了//奇数时
//17,19,22,24,25,28,34,35,36,37,38.
//除异常点以外的数据中最小  17
//除异常点以外的数据中最大  38
//中位数                   28    // 2 * (当前个数 + 1）/ 4 = 位置 
//下四分位数               22   // 1 * (当前个数 + 1）/ 4 = 位置
//上四分位数               36   // 3 * (当前个数 + 1）/ 4 = 位置
//异常点(算的值不在此范围内都算异常值)
//22 - 1.5*(36  - 22 ) = 1;
//36 + 1.5*(36  - 22 ) = 57;//偶数
//12,15,17,19,20,23,25,28,30,33,34,35,36,37
//Q1所在的位置=1（14+1）/4=3.75,   1.25   2.75  
//Q2所在的位置=2（14+1）/4=7.5,    2.5    
//Q3所在的位置=3（14+1）/4=11.25.  3.75   5.5//下四分位数Q1=0.25×第三项+0.75×第四项=0.25×17+0.75×19=18.5；            
//中位数 Q2=0.5×第七项+0.5×第八项=0.5×25+0.5×28=26.5；                
//上四分位数Q3=0.75×第十一项+0.25×第十二项=0.75×34+0.25×35=34.25.//18.5  - 1.5*(34.25  - 18.5 ) = 5.125;
//34.25 + 1.5*(34.25  - 18.5)  = 57.875;
//string result = "下界+下四分位数+中位数+上四分位数+上界+异常点";

作为新手我解决不了的问题为我转换成3D导致左右拖拽框失效 所以我给注释了如下：

private void radioButton1_Click(object sender, EventArgs e)
{if (rbcheck1)//if (radioButton1.Checked){rbcheck1 = false;radioButton1.Checked = false;// 假设chart是一个Chart控件实例chart1.ChartAreas[0].Area3DStyle.Enable3D = false;chart1.ChartAreas[0].Area3DStyle.Inclination = 30;chart1.ChartAreas[0].Area3DStyle.IsClustered = true;chart1.ChartAreas[0].Area3DStyle.IsRightAngleAxes = false;chart1.ChartAreas[0].Area3DStyle.Perspective = 30;chart1.ChartAreas[0].Area3DStyle.Rotation = 30;chart1.ChartAreas[0].Area3DStyle.WallWidth = 0;//开启X轴的左右拖拽chart1.ChartAreas[0].AxisX.ScaleView.Size = 10; // 设置了 X 轴上显示的数据点的数量chart1.ChartAreas[0].AxisX.ScaleView.MinSize = 5; // 设置或获取X轴的视图的最小尺寸chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false; // 滚动条位于图表外侧chart1.ChartAreas[0].InnerPlotPosition.Auto = true;}else{radioButton1.Checked = true;rbcheck1 = true;chart1.ChartAreas.Clear();ChartArea chartArea1 = new ChartArea();设置为3D效果//chartArea1.InnerPlotPosition.Auto = false;chartArea1.Area3DStyle.Enable3D = true; // 启用3D效果chartArea1.Area3DStyle.IsClustered = true; // 设置为集群样式chartArea1.Area3DStyle.Rotation = 20; // 设置旋转角度chartArea1.Area3DStyle.Perspective = 10; // 设置透视角度chartArea1.Area3DStyle.Inclination = 15; // 设置倾斜角度chartArea1.Area3DStyle.LightStyle = LightStyle.Realistic; // 设置光源样式chartArea1.Area3DStyle.WallWidth = 0; // 设置墙宽chartArea1.Area3DStyle.IsRightAngleAxes = false; // 设置是否为右角轴chartArea1.AxisX.ScaleView.Size = 10;   // 设置了 X 轴上显示的数据点的数量chartArea1.AxisX.ScaleView.MinSize = 5; // 设置或获取X轴的视图的最小尺寸chartArea1.AxisX.ScrollBar.IsPositionedInside = false; // 滚动条位于图表外侧chart1.ChartAreas.Add(chartArea1);}
}

一：柱状图

二：折线图

三：直方图

四：横条图

五：箱线图

六：趋势图