telerik ChartGrid浅谈

在最近接触的项目中，有很多都是以Chart图表的方式呈现出来的，关于telerik Chart的使用，有几个小点跟大家分享一下。

1：本例子使用的Chart的命名空间为

xmlns:telerik=http://schemas.telerik.com/2008/xaml/presentation

2．如何增加数据源

         Chart中可以有多喝Series，每个Serie表示一个数据源，实际呈现即为一条曲线

         其中，Serie的类型有 折线，平滑曲线，区域，虚线等。

3．坐标轴

         坐标轴可分为纯数据坐标轴和时间坐标轴，可随意组成坐标系

4．背景网格样式

telerik Chart的背景网格被分为横轴和纵轴，支持用Brush填充，在构造背景网格时，有两种方式

　　4．1 直接写线的样式 背景网格其实就是一纵一横两条线，telerik Chart会自动平铺组合

<!--背景网格样式-->
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY"
                                            MajorXLineDashArray="10,2"
                                            MajorXLineStyle="{StaticResource XLine的样式}"
                                            MajorYLineStyle="{StaticResource YLine的样式}"
                                            StripLinesVisibility="XY">
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>

　　4．2 用Brush填充

  <telerik:RadCartesianChart.Grid>
                            <telerik:CartesianChartGrid MajorLinesVisibility="XY"
                                                        StripLinesVisibility="XY">
                                <telerik:CartesianChartGrid.XStripeBrushes>
                                    <ImageBrush ImageSource="/IDriveTouch;component/Resource/Images/VLine.png" />
                                </telerik:CartesianChartGrid.XStripeBrushes>
                                <telerik:CartesianChartGrid.YStripeBrushes>
                                    <SolidColorBrush Color="Transparent" />
                                    <SolidColorBrush Color="#FFFFFF"
                                                     Opacity="0.10196078431372549" />
                                </telerik:CartesianChartGrid.YStripeBrushes>
                            </telerik:CartesianChartGrid>
                        </telerik:RadCartesianChart.Grid>

5．示例代码如下

<telerik:RadCartesianChart  x:Name="chart"
                                    Width="1184"
                                    Height="770"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top">
           
            <!--数据源-->
            <telerik:LineSeries CategoryBinding="Category"
                                ValueBinding="Value"
                                x:Name="userInput"
                                PointTemplate="{StaticResource PointTemplate}"
                                Stroke="#26FFA8"
                                StrokeThickness="2" />
            <!--数据源-->
            <telerik:LineSeries CategoryBinding="Category"
                                ValueBinding="Value"
                                x:Name="StandardInput"
                                Stroke="#26FFA8"
                                StrokeThickness="2" />
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis x:Name="xZhou"
                                                MajorStepUnit="Second"
                                                Minimum="2000.1.1 00:00:00"
                                                Width="1133"
                                                LineStroke="#FFFFFF"
                                                LineThickness="2"
                                                LabelTemplate="{StaticResource WhiteTemplateX}">
                </telerik:DateTimeContinuousAxis >
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="VAxis"
                                    Maximum="80"
                                    Height="729"
                                    LineStroke="#FFFFFF"
                                    LineThickness="2"
                                    LabelTemplate="{StaticResource WhiteTemplateY}" />
            </telerik:RadCartesianChart.VerticalAxis>
            <!--背景网格样式-->
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY"
                                            MajorXLineDashArray="10,2"
                                            MajorXLineStyle="{StaticResource XLineStyle}"
                                            MajorYLineStyle="{StaticResource YLineStyle}"
                                            StripLinesVisibility="XY">
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>
        </telerik:RadCartesianChart>