visifire后天登录他们官方网站的时候,开掘类似是挂掉了,不清楚是不再营业了,还是唯有服务器出了难题。

0、小叙闲言

除了这一个之外仪表盘控件相比常用外,还有图表也不时应用,同样网络也有特别有力的图片控件,有收取薪俸的(DEVexpress),也有免费的。但大家一直在运用时,只想大概地绘一个图,控件Curry面包车型地铁点不清效应大家都用不到,没要求运用那么功用丰盛的控件,以增加程序运维的成效和压缩程序的占用空间。同时,大家温馨假若能够绘制图表出来,对于程序的移植,也相当有利于。对于大繁多阳台,相信设计艺术是不会变的。废话少讲,直接上海体育场地看成效,假使感觉还行,能够帮忙一下,继续往下看。源码下载地址:

图片 1

VisifireChart的效应不炫,可是对于有个别门类,以为够用的,所以,明天津高校体看了几篇博客,学习了弹指间

一、图表全体布置

简轻便单来看2个图片的构成,一般由多少个部分组成,坐标轴,刻度和刻度值,绘图区域(增多数总局和制图曲线)。前面假如要马到成功数量动态展现,还要花一丝丝素养,可是也是很轻易的,耐心探讨,不会比高档数学难。

贰、坐标轴绘制

先作出两根垂直的直线出来,为x轴和y轴,XAML代码如下。二,三行代码即为三个数轴。四~二三行,是作出多个小三角形,以多变箭头的模样。

 1 <Canvas Margin="5">
 2     <Line x:Name="x_axis" Stroke="Black" StrokeThickness="3" X1="40" Y1="280" X2="480" Y2="280" StrokeStartLineCap="Round"/>
 3     <Line x:Name="y_axis" Stroke="Black" StrokeThickness="3" X1="40" Y1="280" X2="40" Y2="30" StrokeStartLineCap="Round"/>
 4     <Path x:Name="x_axisArrow" Fill="Black">
 5         <Path.Data>
 6             <PathGeometry>
 7                 <PathFigure StartPoint="480,276" IsClosed="True">
 8                     <LineSegment Point="480,284"/>
 9                     <LineSegment Point="490,280"/>
10                 </PathFigure>
11             </PathGeometry>
12         </Path.Data>
13     </Path>
14     <Path x:Name="y_axisArrow" Fill="Black">
15         <Path.Data>
16             <PathGeometry>
17                 <PathFigure StartPoint="36,30" IsClosed="True">
18                     <LineSegment Point="44,30"/>
19                     <LineSegment Point="40,20"/>
20                 </PathFigure>
21             </PathGeometry>
22         </Path.Data>
23     </Path>
24 </Canvas>

C#作出多个小箭头的后台代码如下: 

图片 2图片 3

 1 /// <summary>
 2 /// 作出箭头
 3 /// </summary>
 4 private void DrawArrow()
 5 {
 6     Path x_axisArrow = new Path();//x轴箭头
 7     Path y_axisArrow = new Path();//y轴箭头
 8 
 9     x_axisArrow.Fill = new SolidColorBrush(Color.FromRgb(0xff, 0, 0));
10     y_axisArrow.Fill = new SolidColorBrush(Color.FromRgb(0xff, 0, 0));
11 
12     PathFigure x_axisFigure = new PathFigure();
13     x_axisFigure.IsClosed = true;
14     x_axisFigure.StartPoint = new Point(480, 276);                          //路径的起点
15     x_axisFigure.Segments.Add(new LineSegment(new Point(480, 284), false)); //第2个点
16     x_axisFigure.Segments.Add(new LineSegment(new Point(490, 280), false)); //第3个点
17 
18     PathFigure y_axisFigure = new PathFigure();
19     y_axisFigure.IsClosed = true;
20     y_axisFigure.StartPoint = new Point(36, 30);                          //路径的起点
21     y_axisFigure.Segments.Add(new LineSegment(new Point(44, 30), false)); //第2个点
22     y_axisFigure.Segments.Add(new LineSegment(new Point(40, 20), false)); //第3个点
23 
24     PathGeometry x_axisGeometry = new PathGeometry();
25     PathGeometry y_axisGeometry = new PathGeometry();
26 
27     x_axisGeometry.Figures.Add(x_axisFigure);
28     y_axisGeometry.Figures.Add(y_axisFigure);
29 
30     x_axisArrow.Data = x_axisGeometry;
31     y_axisArrow.Data = y_axisGeometry;
32 
33     this.chartCanvas.Children.Add(x_axisArrow);
34     this.chartCanvas.Children.Add(y_axisArrow);
35 }

多少个小箭头

WPF中从不画带箭头直线的函数,那一个必须求协调写了,最佳的办法自然依然在XAML中,用Path来绘制出一个三角形形在线的末尾。当然这种用相对坐标绘出来的小三角形,它不便宜绘制到别的画布中,当前单独为了做出效果,前边能够用C#动态变化箭头,在后台实现绘制。上述代码的功力如下所示。

图片 4接下来给坐标轴增添上x,y标签,
使用TextBlock表示出,对于标签的体制,是足以定义三个体裁能源的,来统一风格,不需要每贰个标签进行安装。可是当前,首若是为了促作用益,一时半刻不做得过分复杂。

图片 5图片 6

1             <TextBlock x:Name="x_label" Text="x" Canvas.Left="477" Canvas.Top="279"
2                        FontFamily="Arial" FontStyle="Italic" FontSize="20"/>
3             <TextBlock x:Name="y_label" Text="y" Canvas.Left="20" Canvas.Top="20"
4                        FontFamily="Arial" FontStyle="Italic" FontSize="20"/>
5             <TextBlock x:Name="o_label" Text="o" Canvas.Left="20" Canvas.Top="272"
6                        FontFamily="Arial" FontStyle="Italic" FontSize="20"/>

添加X,Y,O标签 

三、坐标轴刻度和标签增添

刻度就是1层层的小直线,调节好每一条小直线的职位,就能够轻巧作出标签。一样,先用XAML语言,静态画三个小线段,看一看效果,然后用C#语言,在后台动态作出全部的小线段。XAML代码如下

1 <Line x:Name="x_scale1" Stroke="Black" StrokeThickness="1" X1="50" Y1="280" X2="50" Y2="276" StrokeEndLineCap="Triangle"/>
2 <Line x:Name="y_scale1" Stroke="Black" StrokeThickness="1" X1="40" Y1="270" X2="44" Y2="270" StrokeEndLineCap="Triangle"/>

原点坐标O=(40,280)(那是周旋于窗口的坐标),第2个x_scale1刻度,离原点10px距离,即盘算每10px作1个刻度,故刻度的源点为(50,280);在轴上的刻度,终点的坐标同样,故为(50,276);|Y2-Y一|=4px,即为小刻度的长度。y_scale一也是同样的法则。作出四个小刻度后,效果如下

图片 7

一坐标轴刻度线增多

每一个坐标轴的刻度线都游人如织,不容许三个个都用XAML语言都讲述出来,照旧要发布一下C#代码的素养。在地点已经清楚哪些作出x轴上和y轴上的刻度,并且已经作出来三个,多作多少个,无非是循环管理的难题,比较便于。C#代码如下。关键部分在14、壹五行和3一、3二行,在窗口的坐标种类中,x轴的动向是向右,而y轴的方向是向下,因而,x轴方向与大家所作的图片x轴方向同样,而y轴方向与图片y轴方向相反,所以,1四行代码上相加,而3一行代码上相减,这样就不错绘制了颇具刻度了。

 1 /// <summary>
 2 /// 作出x轴和y轴的刻度线
 3 /// </summary>
 4 private void DrawScale()
 5 {
 6     for (int i = 0; i < 45; i += 1)//作480个刻度,因为当前x轴长 480px,每10px作一个小刻度,还预留了一些小空间
 7     {
 8         //原点 O=(40,280)
 9         Line x_scale = new Line();
10         x_scale.StrokeEndLineCap = PenLineCap.Triangle;
11         x_scale.StrokeThickness = 1;
12         x_scale.Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));
13 
14         x_scale.X1 = 40 + i * 10;   //原点x=40,每10px作1个刻度
15         x_scale.X2 = x_scale.X1;    //在x轴上的刻度线,起点和终点相同
16 
17         x_scale.Y1 = 280;           //与原点坐标的y=280,相同 
18         x_scale.Y2 = x_scale.Y1 - 4;//刻度线长度为4px
19 
20         if (i < 25)//由于y轴短一些,所以在此作出判断,只作25个刻度
21         {
22             //作出Y轴的刻度
23             Line y_scale = new Line();
24             y_scale.StrokeEndLineCap = PenLineCap.Triangle;
25             y_scale.StrokeThickness = 1;
26             y_scale.Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));
27 
28             y_scale.X1 = 40;            //原点x=40,在y轴上的刻度线的起点与原点相同
29             y_scale.X2 = y_scale.X1 + 4;//刻度线长度为4px
30 
31             y_scale.Y1 = 280 - i * 10;  //每10px作一个刻度 
32             y_scale.Y2 = y_scale.Y1;    //起点和终点y坐标相同 
33             this.chartCanvas.Children.Add(y_scale);
34         }
35         this.chartCanvas.Children.Add(x_scale);
36     }
37 }

上述代码奉行后效果如下(左图):

图片 8

为了发挥更为明亮,平常所用的图片都有八个大刻度,在此,小编也增加二个,其实也相当轻易,无非正是在for循环在那之中增多3个判别,到了所急需的地方的时候,将刻度线加粗,加长一些,也正是改动它的体裁。增多大刻度线的C#代码如下,代码只是对地点的代码作了点小修改,其功效如上海图书馆(右图)。

图片 9图片 10

 1 /// <summary>
 2 /// 作出x轴和y轴的标尺
 3 /// </summary>
 4 private void DrawScale()
 5 {
 6     for (int i = 0; i < 45; i += 1)//作480个刻度,因为当前x轴长 480px,每10px作一个小刻度,还预留了一些小空间
 7     {
 8         //原点 O=(40,280)
 9         Line x_scale = new Line();
10         x_scale.StrokeEndLineCap = PenLineCap.Triangle;
11         x_scale.StrokeThickness = 1;
12         x_scale.Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));
13 
14         x_scale.X1 = 40 + i * 10;   //原点x=40,每10px作1个刻度
15         x_scale.X2 = x_scale.X1;    //在x轴上的刻度线,起点和终点相同
16 
17         x_scale.Y1 = 280;           //与原点坐标的y=280,相同 
18         if (i % 5 == 0)//每5个刻度添加一个大刻度
19         {
20             x_scale.StrokeThickness = 3;//把刻度线加粗一点
21             x_scale.Y2 = x_scale.Y1 - 8;//刻度线长度为8px 
22         }
23         else
24         {
25             x_scale.Y2 = x_scale.Y1 - 4;//刻度线长度为4px 
26         }
27 
28         if (i < 25)//由于y轴短一些,所以在此作出判断,只作25个刻度
29         {
30             //作出Y轴的刻度
31             Line y_scale = new Line();
32             y_scale.StrokeEndLineCap = PenLineCap.Triangle;
33             y_scale.StrokeThickness = 1;
34             y_scale.Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0));
35 
36             y_scale.X1 = 40;            //原点x=40,在y轴上的刻度线的起点与原点相同
37             if (i % 5 == 0)
38             {
39                 y_scale.StrokeThickness = 3;
40                 y_scale.X2 = y_scale.X1 + 8;//刻度线长度为4px 
41             }
42             else
43             {
44                 y_scale.X2 = y_scale.X1 + 4;//刻度线长度为8px 
45             }
46 
47             y_scale.Y1 = 280 - i * 10;  //每10px作一个刻度 
48             y_scale.Y2 = y_scale.Y1;    //起点和终点y坐标相同 
49             this.chartCanvas.Children.Add(y_scale);
50         }
51         this.chartCanvas.Children.Add(x_scale);
52     }
53 }

增加大刻度

二坐标轴标签增多

标签的呈现照旧选取文本块(TextBlock控件)来促成。为了让标签的展现地方正好好,对坐标值做了有些偏移,上面程序中曾经表明得比较清楚了。

图片 11图片 12

 1 /// <summary>
 2 /// 添加刻度标签
 3 /// </summary>
 4 private void DrawScaleLabel()
 5 {
 6     for (int i = 1; i < 7; i++)//7 个标签,一共
 7     {
 8         TextBlock x_ScaleLabel = new TextBlock();
 9         TextBlock y_ScaleLabel = new TextBlock();
10 
11         x_ScaleLabel.Text = (i * 50).ToString();//只给大刻度添加标签,每50px添加一个标签
12 
13         Canvas.SetLeft(x_ScaleLabel, 40 + 5 * 10 * i - 12);//40是原点的坐标,-12是为了让标签看的位置剧中一点
14         Canvas.SetTop(x_ScaleLabel, 280 + 2);//让标签字往下移一点
15 
16         y_ScaleLabel.Text = (i * 50).ToString();
17         Canvas.SetLeft(y_ScaleLabel, 40 - 25);              //-25px是字体大小的偏移
18         Canvas.SetTop(y_ScaleLabel, 280 - 5 * 10 * i - 6);  //280px是原点的坐标,同样-6是为了让标签不要上坐标轴叠上
19 
20         this.chartCanvas.Children.Add(x_ScaleLabel);
21         this.chartCanvas.Children.Add(y_ScaleLabel);
22     }
23 }

增添刻度标签

 运转此代码后,效果如下:

图片 13

温馨也尝尝写了写效果,VisifireChart援助单组数据的相比较,和多组数据的比较。

四、数总局增添和曲线绘制

1数总部增添显示

对此数分公司的显示,用ellipse作出2个个小圆点,画在坐标轴中。为了艺术办事处展现的方法,还是先用XAML语言静态作出多个数总局P1=(60,80);P贰=(180,拾0)。由于坐标系的不等,七个数办事处在canvas画布里面包车型客车坐标要做2个改造。由于原点O=(40,280),且y轴是倒转的趋势,故x一=40+60=拾0;y1=280-80=200;可得P一_Canvas=(十0,200);同样的不②秘技,P二_Canvas=(220,180)。XAML代码如下

1 <Ellipse Fill="Blue" Height="8" Width="8" Canvas.Left="100" Canvas.Top="200"/>
2 <Ellipse Fill="Blue" Height="8" Width="8" Canvas.Left="220" Canvas.Top="180"/>

由于小圆点有自然的直径,为了让其主干与数分局重合,还要做1个小的调动,x轴值+半径=x主导;y轴值-半径=y主导。由此,七个数办事处调治后的职分为P一_Canvas=(96,196),P2_Canvas=(216,176)。

先给程序定义1个数分部会集,后边生成七个随机点,X轴坐标是每隔50px出现三次,Y轴坐标的高低是随机生成的。C#代码如下

 1 private void DrawPoint()
 2 {
 3     //随机生成8个点
 4     Random rPoint = new Random();
 5     for (int i = 0; i < 8; i++)
 6     {
 7         int x_point = i * 50;
 8         int y_point = rPoint.Next(250);
 9         dataPoints.Add(new Point(x_point, y_point));
10     }
11 
12     for (int i = 0; i < dataPoints.Count; i++)
13     {
14         Ellipse dataEllipse = new Ellipse();
15         dataEllipse.Fill = new SolidColorBrush(Color.FromRgb(0, 0, 0xff));
16         dataEllipse.Width = 8;
17         dataEllipse.Height = 8;
18 
19         Canvas.SetLeft(dataEllipse, 40 + dataPoints[i].X - 4);//-4是为了补偿圆点的大小,到精确的位置
20         Canvas.SetTop(dataEllipse, 280 - dataPoints[i].Y - 4);
21 
22         chartCanvas.Children.Add(dataEllipse);
23     }
24 }

 数总部集结注脚如下

private List<Point> dataPoints = new List<Point>();

 上述代码的周转效果如下(左图): 

图片 14

贰曲线绘制

 将全数点用折线描绘出来,C#代码如下,效果如上海体育场合(右图)。由于前后五遍的代码是见仁见智时间运作的,生成的点是私自的,不等同,所以两副图点区别等。

 1 private void DrawCurve()
 2 {
 3     Polyline curvePolyline = new Polyline();
 4 
 5     curvePolyline.Stroke = Brushes.Green;
 6     curvePolyline.StrokeThickness = 2;
 7 
 8     curvePolyline.Points = coordinatePoints;
 9     chartCanvas.Children.Add(curvePolyline);  
10 }

 对coordinatePoints的概念和开首化如下。

//这行代码在程序的开始部分
private PointCollection coordinatePoints = new PointCollection();
----------------------------------------------------------------------------
//将数据点在画布中的位置保存下来
coordinatePoints.Add(new Point(40 + dataPoints[i].X, 280 - dataPoints[i].Y));

多少是从网络找的,然后自身弄成了XML格式文件,读取到了List列表里。

伍、让图表动起来 

第贰,思虑要让线动起来,表中两类成分需求移,三个线,另2个是小圆点。而线是随多寡点动的,这一有的WPF已经帮大家搞好了;而点动,我们要不停地改成它在canvas中的地点,那样就足以看来动的机能,每一回单击一下鼠标,就加多1个点,那么些点的Y轴坐标如故随机生成的,C#代码如下。这么些函数首要就做了二件事,3个是移除集结中的第0个点、在终极地方增多1个点,二是将全部数据都向左移50px,很轻便。

 1 private void AddCurvePoint(Point dataPoint)
 2 {
 3     dataPoints.RemoveAt(0);
 4     dataPoints.Add(dataPoint);
 5     for (int i = 0; i < dataPoints.Count; i++)
 6     {
 7         //每一个点的X数据都要向左移动50px
 8         dataPoints[i] = new Point(dataPoints[i].X - 50, dataPoints[i].Y);
 9         coordinatePoints[i] = new Point(40 + dataPoints[i].X, 280 - dataPoints[i].Y);
10         
11         Canvas.SetLeft(pointEllipses[i], 40 + dataPoints[i].X - 4);//-4是为了补偿圆点的大小,到精确的位置
12         Canvas.SetTop(pointEllipses[i], 280 - dataPoints[i].Y - 4);
13     }
14 }

鼠标单击时的顺序如下:

1 private void chartCanvas_MouseDown(object sender, MouseButtonEventArgs e)
2 {
3     //随机生成Y坐标
4     Point dataPoint = new Point(400, (new Random()).Next(250));
5 
6     AddCurvePoint(dataPoint);
7 }

地点程序中用到的多少个数据结构申明如下:

private List<Point> dataPoints = new List<Point>();
private PointCollection coordinatePoints = new PointCollection();
private List<Ellipse> pointEllipses = new List<Ellipse>();

到底做出来了,效果还不易的,来观赏一下和睦的成果,花了大半天了。

图片 15

单组数据的对照,效果如故同理可得雅观一些的。

心体面会

合抱之木,生于毫末;九层之台,起于垒土;千里之行,始于足下。八个图纸,尽管错综相连,但一步一步来,将每一步用心构思,然后稳步完毕,尽管做不到周全,可是至少能够达成基本指标。

图标还有改多能够改正的地点,作用还很弱小。能够给图表加上网格,横轴的坐标的价签能够实时变化,以变成示波器的功效。

下二个对象,给图表增添更加多效益。

下下一指标,完毕窗体的吹牛,做出类似360安全警卫1一的分界面。

图片 16图片 17

图片 18图片 19

图片的样式是通过多个枚举参数设置的RenderAs,下设好些个项:点,线,柱状图等,基本都是比较常用的。

单组数据的时候,用哪一种样式是都没反常的,不过当多组数据整合时,如若是一样种体裁也是OK的,然而尽管是见仁见智的样式,则过多不合作的。

不相称的,直接在盘算页面,直接就可以抛错,如图

图片 20

两组数据,一个安装的是Doughnut(圈),3个装置的是Line(线),那二种无法在1个X轴和Y轴上开始展览连锁的落到实处展现,所以,会争辨。

图片 21

当五个都安装成Doughnut时,不争辨,能够呈现,但是很乱,所以具体的效果,供给开采职员本人依据工作必要,举办相关的创立。

 

地方两篇帖子基本都讲述了如何去用VisifireChart,然而提供的代码一般都以CS的代码,个人更欣赏用XAML代码去贯彻,所以,小编的代码除了Binding以外,页面包车型地铁统一筹算,是用XAML写的。

  <Grid>
        <chart:Chart Name="chart" AnimatedUpdate="True" AnimationEnabled="True" ThemeEnabled="True" View3D="True" ScrollingEnabled="True" ShadowEnabled="True" >
            <chart:Chart.Titles>
                <chart:Title FontSize="16" Text="部分省平均薪资"/>
            </chart:Chart.Titles>
            <chart:Chart.AxesY>
                <chart:Axis Suffix="元"/>
            </chart:Chart.AxesY>
            <chart:Chart.Series>
                <chart:DataSeries DataSource="{Binding WargeList,UpdateSourceTrigger=PropertyChanged}" LegendText="非城镇收入" RenderAs="Doughnut">
                    <chart:DataSeries.DataMappings>
                        <chart:DataMapping MemberName="AxisXLabel" Path="CityName"/>
                        <chart:DataMapping MemberName="YValue" Path="NpoWage"/>
                        <chart:DataMapping MemberName="Tag" Path="CityName"/>
                    </chart:DataSeries.DataMappings>
                </chart:DataSeries>
                <chart:DataSeries DataSource="{Binding WargeList,UpdateSourceTrigger=PropertyChanged}" LegendText="城镇收入" RenderAs="Doughnut">
                    <chart:DataSeries.DataMappings>
                        <chart:DataMapping MemberName="AxisXLabel" Path="CityName"/>
                        <chart:DataMapping MemberName="YValue" Path="PoWage"/>
                        <chart:DataMapping MemberName="Tag" Path="CityName"/>
                    </chart:DataSeries.DataMappings>
                </chart:DataSeries>
            </chart:Chart.Series>
        </chart:Chart>
    </Grid>

只供给将相关的数量绑定到相应的字段上,剩下的就交付程序本人呢。

代码

 

相关文章