C#课设-数据可视化大屏-T2

接上一篇帖子，本帖子的内容在于实现四个图形的绘制。既然是绘图，那我们就需要数据，在当前项目的exe文件的同目录下建立数据文件夹用来存放数据，如图所示。

引入开源库OxyPlot

绘图采用第三方的开源库OxyPlot,引入到项目方法如下：

 

之后点击安装即可。

说明：实例中的数据均为模拟的虚构数据

实例中所有数据我们在项目中添加一个专门的类DataPars来存储。

绘制棒状图

棒状图数据如图：

读取数据之前我们需要知道数据的路径，利用如下代码可以获得当前程序运行的地址，以字符串的形式返回；

string BasePath = System.AppDomain.CurrentDomain.BaseDirectory;

根据我们之前存数据的位置，对上述得到的地址进行字符串加法就可，之后利用相关函数读取数据的所有行，注意到我们棒状图的横轴是数值，纵轴是类别，所以需要设置两个数值，注意数组的长度和类型，这部分代码如下：

string[] strarry = File.ReadAllLines(csvfile,Encoding.Default);
dp.GameNames = new string[strarry.Length - 1];
dp.GameSales = new double[strarry.Length - 1];

 对得到的原始数据，我们以逗号来分割字符串，并将分割之后的字符串的第一列、第二列分别给与上述初始化的数组。注意分割之后的是字符串类型，使用时需要将其转化为double类型。这部分代码如下：

for (int i = 0; i < strarry.Length - 1; i++)
{
   string tempstr = strarry[i + 1];
   string[] strings = tempstr.Split(',');
   dp.GameNames[i] = strings[0];
   dp.GameSales[i] = double.Parse(strings[1]);
}

绘图部分，在之前设置的绘制图像的区域内添加绘图模块

 添加模块之后，设置边框宽度、背景颜色、透明度等等，读者也可自行摸索。

//绘图
pv1.Model = new OxyPlot.PlotModel();
//pv1.Model.Title = "部分游戏营收金额";
//将绘图的边框的宽度改为0
pv1.Model.PlotAreaBorderThickness = new OxyPlot.OxyThickness(0);
//设置背景和透明度
pv1.Background = new SolidColorBrush(Colors.Gray);
pv1.Background.Opacity = 0.1;

添加坐标轴，左侧分类轴，下方数值轴。

//添加左方的分类轴
CategoryAxis ca = new CategoryAxis();
ca.Position = AxisPosition.Left;
for (int i = 0; i < dp.GameNames.Length - 1; i++)
{
ca.Labels.Add(dp.GameNames[i]);
}
ca.FontSize = 8;
ca.TickStyle = TickStyle.None;
pv1.Model.Axes.Add(ca);

//添加下方的数值轴
LinearAxis la = new LinearAxis();
la.Position = AxisPosition.Bottom;
la.IsAxisVisible = false;
pv1.Model.Axes.Add(la);

添加棒状图的数据，并绘制。

BarSeries bs = new BarSeries();
for (int i = 0; i < dp.GameSales.Length - 1; i++)
{
BarItem bt = new BarItem(dp.GameSales[i]);
bs.Items.Add(bt);

}
pv1.Model.Series.Add(bs);
//刷新
pv1.Model.InvalidatePlot(true);

绘制图形效果如下：

 绘制圆环图

圆环图数据如图：

读取数据的方式和棒状图读取数据的方法类似，这里不再过多赘述，在绘图区域添加plotview模块，之后初始化并设置相关属性，如棒状图类似，这里不再过多赘述。

绘图部分代码如下：

PieSeries ps = new PieSeries();
for(int i = 0; i < strarry.Length -1; i++)
{
PieSlice bt = new PieSlice(dp.GameSeries[i], dp.GamePercent[i]);
ps.Slices.Add(bt);
}
//设置圆环状
ps.InnerDiameter = 0.5;

pv2.Model.Series.Add(ps);
pv2.Model.InvalidatePlot(true);

绘制效果如图所示：

绘制K线图

K线图数据如图：

 读取数据的方式和棒状图读取数据的方法类似，这里不再过多赘述，在绘图区域添加plotview模块，之后初始化并设置相关属性，如棒状图类似，这里不再过多赘述。

绘图部分代码如下：

CandleStickSeries css = new CandleStickSeries();
for(int i = 0;i< dp.Date.Length;i++)
{
HighLowItem hlt = new HighLowItem();
hlt.X = dp.Date[i].ToOADate();
hlt.Open = dp.Open[i];
hlt.Close = dp.Close[i];
hlt.High = dp.High[i];
hlt.Low = dp.Low[i];
css.Items.Add(hlt);
}

pv3.Model.Series.Add(css);
pv3.Model.InvalidatePlot(true);

绘制效果如图所示：

 绘制等值线图与热力图综合

此部分若有兴趣可关注后与我私信获得源码及答疑，这里不做说明和代码注释！

绘制效果如图所示：

 整体的大屏效果如下图所示：

 双击实现图片放大

代码如下：

private void Big_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
// sender表示事件是谁触发的
PlotView pvtemp = sender as PlotView;
DockPanel dp = (DockPanel)pvtemp.Parent;
dp.Children.Clear();

Window wnew  = new Window();
Grid gnew = new Grid();
gnew.Children.Add(pvtemp);
wnew.Content = gnew;
wnew.ShowDialog();

gnew.Children.Clear ();
dp.Children.Add(pvtemp);

}

源码或答疑关注之后私信就行，觉得内容不错可以点赞收藏关注三连走一波~~~