WPF Devexpress 控件库中ChartControl 实现股票分时走势图

• 概要

从事金融行业开发 ，会接触些图表控件，这里我分享一下自己基于DevExpress.Charts.v16.2开发的股票分时走势图的经验。

附上源码：点击跳转

如果需要讨论，Q群：580749909

• 截图

• 思路

  <dxc:ChartControl CrosshairEnabled="True" DataSource="{Binding ChartCollection}">

            <dxc:XYDiagram2D>

                <!--  设置X轴的内容  -->

                <dxc:XYDiagram2D.AxisX>

                    <dxc:AxisX2D GridLinesVisible="True" TickmarksMinorVisible="True">

                        <dxc:AxisX2D.Label>

                            <dxc:AxisLabel ElementTemplate="{StaticResource XAxisTemplate}" />

                        </dxc:AxisX2D.Label>

                        <dxc:AxisX2D.WholeRange>

                            <!--

                            这里的范围表示，X轴的最大值和最小值。

                            因为股票的开盘时间是固定的9：30-15：00所以这里可以写死。

                            -->

                            <dxc:Range

                                MaxValue="40"

                                MinValue="0"

                                SideMarginsValue="0" />

                        </dxc:AxisX2D.WholeRange>

                        <dxc:AxisX2D.NumericScaleOptions>

                            <dxc:ContinuousNumericScaleOptions

                                AutoGrid="False"

                                GridOffset="0"

                                GridSpacing="10" />

                        </dxc:AxisX2D.NumericScaleOptions>

                    </dxc:AxisX2D>

                </dxc:XYDiagram2D.AxisX>

                <!--  设置图中的内容  -->

                <dxc:XYDiagram2D.Series>

                    <!--  在图里添加一条线，反之这里也能添加其它的例如：条形图、河流图、蜡烛图、点等。设置Line的样式也是在这里Line拥有自己的控件模板开发者可以随意更改。  -->

                    <dxc:LineSeries2D

                        ArgumentDataMember="Date"

                        Brush="#F96E48"

                        ValueDataMember="Price">

                        <dxc:LineSeries2D.LineStyle>

                            <!--设置Line的粗细-->

                            <dxc:LineStyle Thickness="1" />

                        </dxc:LineSeries2D.LineStyle>

                        <dxc:LineSeries2D.CrosshairLabelTemplate>

                            <!--  设置鼠标悬浮在图上的内容（模板），之前我写的一篇文章也是专门讲的这里应用  -->

                            <DataTemplate>

                                <Grid UseLayoutRounding="True">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="70" />

                                        <ColumnDefinition />

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition />

                                    </Grid.RowDefinitions>

                                    <TextBlock

                                        Grid.Column="0"

                                        HorizontalAlignment="Left"

                                        Text="股票价格" />

                                    <TextBlock

                                        Grid.Row="0"

                                        Grid.Column="1"

                                        Margin="3,2,3,2"

                                        VerticalAlignment="Center"

                                        FontWeight="Bold"

                                        Text="{Binding SeriesPoint.Tag.Price}"

                                        TextAlignment="Right" />

                                </Grid>

                            </DataTemplate>

                        </dxc:LineSeries2D.CrosshairLabelTemplate>

                    </dxc:LineSeries2D>

                </dxc:XYDiagram2D.Series>

            </dxc:XYDiagram2D>

        </dxc:ChartControl>