天天看點
傳回

【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}
Argument = {1}
Value = {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

上一篇: 30 分鐘編寫一個 Flask 應用
下一篇: java-為什麼可以這樣通路父類的中的變量？