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>