1.前言
最近有好一阵子没有写文章了，这几天无聊写了一个主要用于MVVM绑定的自定义RectangleChart柱状图形控件，主要模仿Chart图形中的数据显示。这里跟大家分享下自定义RectangleChart柱状图形控件的思路和心得。-
2.功能： -
以下图片为自定义RectangleChart柱状体控件的详细功能。
刻度表 ：通过刻度表可以让整个控件的图形数据显示更加直观。
刻度列表：显示图形中的所有刻度。
刻度值 ：标记整个图形中各个刻度的进制位(如图形中所示，进制位为10)。
柱状体 ：数据的柱状图形表示。
柱状体值：具体的数据值。
数据列表：整个图形中的所有数据。 -
- 3.思路：
- 这种简单的图形控件的思路一般是这样的。首先我们会考虑到，我们需要画一个刻度表（也就是表格），然后再画上刻度列表（也就是右侧0-100的数据），然后根据数据列表画上相应的柱状体。这个是我们起初的思路。然后我们需要根据一定的计算后，把结果画在Canvas面板中的相应位置上。
- 根据初始的思路我们想到我们需要定义一个依赖属性（DataSource 类型为List<ChartData>）,ChartData为自定义的一个数据类型。然后我们需要根据接收到的DataSource的值进行计算后绘图。绘图前我们需要实现的功能就是画刻度列表，刻度列表不可以随便画，必须计算出接近数据结合（DataSource值）的值。也就是计算出最接近DataSource中的最大值和最小指，比如图形中的刻度列表最大值为100，最小值为0。计算的思路是找出最大值然后去。
-
计算前我们需要定义一些内部使用的变量，其具体代码如下： private string _lineColor = "#D3E5FF"; //刻度列表线颜色
private double ChartMaxYValue = 100; //Y轴最大值
private double ChartMaxXValue { get; set; } //X轴最大值
private int leftMargin = 100; //面板左边框
private int rightMargin = 100; //面板右边框
private int topMargin = 20; //面板上边框
private int bottomMargin = 20; //面板下边框
private int leftChartMargin = 20; //具体图形的左边框
private int rightChartMargin = 20; //具体图形的右边框
private int ySize = 40; //Y轴线间距
private int xSize = 50; //X轴线间距
private int startY = 20; //Y轴起点
private int endY = 460; //Y轴结束点
private int startX = 0; //X轴起点
private int endX = 100; //Y轴起点
private double yStepSize = 0.8; //Y轴的进位制
private int chartWidth = 40; //图形宽度
相关文章：