【WPF】ChartControl的使用

一、前言

      本月正好做一些關於工程4D,5D的界面展示，正好要用到Dev控件中的ChartControl控件，也就是圖表控件。

      折騰了兩星期完成了一個比較能說的過去的界面吧。（領導要求高，可能不是這么想的吧，哈哈）

 

二、ChartControl的UI解讀

 <dxc:ChartControl Name="SheduleBarChart" BorderThickness="0">
                     
                    <dxc:ChartControl.Legend>
                        <dxc:Legend Orientation="Vertical"  
                                       HorizontalPosition="RightOutside" 
                                       VerticalPosition="Top" FontSize="10" />
                     </dxc:ChartControl.Legend>
                     
                     <dxc:ChartControl.Titles>
                         <dxc:Title Dock="Top" 
                                      HorizontalAlignment="Center" 
                                      FontSize="15"  
                                      Content="工程類型統計圖" />
                    </dxc:ChartControl.Titles>
 
                     <dxc:XYDiagram2D EnableAxisXNavigation="True" >
                         <dxc:XYDiagram2D.AxisX>
                             <dxc:AxisX2D x:Name="BaraxisX" TickmarksMinorVisible="False" TickmarksVisible="False">
                             </dxc:AxisX2D>
                         </dxc:XYDiagram2D.AxisX>
                         
                         <dxc:XYDiagram2D.AxisY>
                             <dxc:AxisY2D>                                
                                 <dxc:AxisY2D.Title>
                                     <dxc:AxisTitle Content="工程累計量" />
                                 </dxc:AxisY2D.Title>                                 
                                 <dxc:AxisY2D.WholeRange>
                                     <dxc:Range MinValue="0" AutoSideMargins="True"/>
                                 </dxc:AxisY2D.WholeRange>                               
                                 <dxc:AxisY2D.NumericOptions>
                                     <dxc:NumericOptions Format="Number"/>
                                 </dxc:AxisY2D.NumericOptions>                               
                             </dxc:AxisY2D>
                         </dxc:XYDiagram2D.AxisY>
                         
                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(計划)長度(m)" Visible="{Binding PlanVisible}" 
                                                            DataSource="{Binding PlanLengthList}"
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />

                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(計划)面積(m2)" Visible="{Binding PlanVisible}" 
                                                            DataSource="{Binding PlanAreaList}" 
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />

                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(計划)體積(m3)" Visible="{Binding PlanVisible}"  
                                                            DataSource="{Binding PlanVolumeList}" 
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />

                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(實際)長度(m)" Visible="{Binding PracticeVisible}" 
                                                            DataSource="{Binding PracticeLengthList}" 
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />

                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(實際)面積(m2)" Visible="{Binding PracticeVisible}" 
                                                            DataSource="{Binding PracticeAreaList}" 
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />

                         <dxc:BarSideBySideStackedSeries2D  DisplayName="(實際)體積(m3)" Visible="{Binding PracticeVisible}" 
                                                            DataSource="{Binding PracticeVolumeList}" 
                                                            ArgumentDataMember="ProjectName" ArgumentScaleType="Auto" 
                                                            ValueDataMember="ProjectValue" ValueScaleType="Numerical" />
                     </dxc:XYDiagram2D>
                     
                     <dxc:ChartControl.ToolTipController>
                         <dxc:ChartToolTipController AutoPopDelay="0"/>
                     </dxc:ChartControl.ToolTipController>                   
                 </dxc:ChartControl>

 

<ChartControl>

Legend：指的是圖表曲線的標簽，指明該曲線表示的是什么曲線，其曲線顏色是什么。主要設置其HorizontalPosition與VerticalPosition。

Titles: 指的是圖表的主題，例如：工程統計圖、財務報表、數據分析圖等等。主要設置其Dock(Title的位置)，以及一些文字相關的設置。

</ChartControl>

 

<XYDiagram2D>

AxisX: 設置x軸，TickMarksVisible指的是刻度是否顯示，TickMarksMinorVisible指的是最小刻度是否顯示

Title：設置坐標軸的標題，比如橫坐標為時間，縱坐標為量等等

WholeRange：坐標軸的整個范圍，這個范圍大於等於VisualRange

VisualRange：坐標軸的可視范圍，當前圖表的坐標范圍，假如橫坐標為1—100，如果你滾動橫向滑輪到5-10，那么5-10就是VisualRange

 

值得注意的是做Revit二次開發時設置這兩個屬性用dev的mvvm模式綁定很容易導致revit崩潰（15.2系列）

</XYDiagram2D>

 

如果你的圖表的橫坐標是DateTime類型，你還可以設置橫坐標的顯示間隔是“天”、“周”、“月”、“季”、“年”等等

 <dxc:AxisX2D x:Name="axisX" TickmarksMinorVisible="False" TickmarksVisible="False" >
       <dxc:AxisX2D.DateTimeScaleOptions>
                     <dxc:ManualDateTimeScaleOptions MeasureUnit="{Binding MinUnit,Mode=TwoWay}" />
       </dxc:AxisX2D.DateTimeScaleOptions>
 </dxc:AxisX2D>

就是上面的MeasureUnit

 

三、ChartControl的曲線類型

       曲線類型的選擇需要你根據自身項目的因素去選擇合適的曲線類型，在心中想好要表現的曲線類型后，可以去Dev官網找找你想的那種曲線的名稱類型是什么，一般曲線的UI形式如下：

 <dxc:LineSeries2D  Visible="{Binding PlanVisible}" DisplayName="工程"  DataSource="{Binding PlanMasonryVolumeList}" 
                    ArgumentDataMember="TaskTime" ArgumentScaleType="DateTime" 
                    ValueScaleType="Numerical" ValueDataMember="TaskValue"/>

DisplayName：曲線的顯示名稱，主要用於在Legend顯示

Visible：曲線的可見性

DataSource：曲線的數據源，用於MVVM數據綁定

ArgumentDataMember：橫軸值

ArgumentScaleType: 橫軸值的數據類型

ValueDataMember：縱軸值

ValueScaleType: 縱軸值得數據類型

 

四、ChartControl的鼠標縱線取值

       Dev的ChartControl會自帶一個鼠標縱線用於方便的知道鼠標所指當前位置的橫坐標信息與縱坐標信息

      如果你想取得當前鼠標所在位置的橫坐標信息與縱坐標信息，可以讓ChartControl添加一個MouseMove事件，在事件中：

private void chartControl1_MouseMove(object sender, MouseEventArgs e)
{
      ChartHitInfo hitInfo = chartControl1.CalcHitInfo(e.GetPosition(chartControl1));
            
      if (hitInfo != null && hitInfo.SeriesPoint != null) 
      {
                SeriesPoint point = hitInfo.SeriesPoint;

                tooltip_text.Text = string.Format("Series = {0}\nArgument = {1}\nValue = {2}",
                    point.Series.DisplayName, point.Argument, point.Value);
                tooltip1.Placement = PlacementMode.Mouse;
                
                tooltip1.IsOpen = true;
                Cursor = Cursors.Hand;
      }
      else 
      {
                tooltip1.IsOpen = false;
                Cursor = Cursors.Arrow;
      }
}

   

 

五、ChartControl的圖表的導出

      在xaml.cs文件中，基本上稍微復雜的情況都包含在里面了。

public ScheduleAxisPage() 
{
            InitializeComponent();
            
            ExportCost.Click += new RoutedEventHandler(OnExportChartClick);
            ExportProjectType.Click += new RoutedEventHandler(OnExportChartClick);
            this.DataContext = new ScheduleAxisViewModel(); 
}

private void OnExportChartClick(object sender, RoutedEventArgs e)
{
            
            var dlg = QSContainer.Resolve<ISaveFileDialogService>();
            dlg.Filter = "PDF file (*.pdf)|*.pdf|Image files (*.bmp;*.jpg;*.png)|*.bmp;*.jpg;*.png";
            if (sender == ExportCost)
            {
                dlg.DefaultFileName = "schedule_cost.pdf";
            }
            else if (sender == ExportProjectType)
            {
                dlg.DefaultFileName = "schedule_projectType.pdf";
            }
           
            if (!dlg.ShowDialog())
            {
                return;
            }

            var filePath = dlg.GetFullFileName();
            var ext = System.IO.Path.GetExtension(filePath);

            var chart = SheduleChart;
            if (sender == ExportCost)
            {
                chart = SheduleChart;//chart's name
            }
            else if(sender == ExportProjectType)
            {
                if(LineGrid.Visibility==Visibility.Visible)
                {
                    chart = SheduleLineChart; //chart's name
                }
                else
                {
                    chart = SheduleBarChart;//chart's name

                }
                
            }

            
            PrintSizeMode sizeMode = PrintSizeMode.Stretch;
            if (ext == ".pdf")
            {
                chart.ExportToPdf(filePath, sizeMode);

                try
                {
                    Process.Start(filePath);
                }
                finally { }
            }
            else if (ext == ".bmp" || ext == ".jpg" || ext == ".png")
            {
                chart.ExportToImage(filePath, sizeMode);
                try
                {
                    Process.Start(filePath);
                }
                finally { }
            }
}

 

六、ChartControl的效果

       上述圖表中刪除了些公司的相關項目信息，總之本文的ChartControl的內容已經足夠滿足日常使用了，加上MVVM模式會讓你更加錦上添花。
        我覺得在學習Dev控件中給我最多幫助的還是Dev的幫助文檔與幫助實例。大多數程序員的英語還是比較過關的，看懂官網上的英語文檔應該不是什么難事。

       這幾天發現園內一篇博客描述ChartControl樣式的，結合閱讀更佳 http://www.cnblogs.com/kybs0/p/5893653.html