Silverlight圖表制作

      需要做動態的，具有豐富動畫效果的圖表，大體有三個選擇，“1、Silverlight  2、Jquery   3、Flash”。這三者都是富客戶端技術，相比較“MSChart”而言，效果很贊，當然如果您有更好的方式，請不吝賜教。Silverlight是“.Net”組件之一，開發方便和“asp.net”、“WCF”等技術無縫集成，開發方便。缺點是裝機量不夠，如果開發企業級應用尚可，而且支持“3D”的“XNA”。     Juery圖表，無需插件，適合於面向大眾的網站，但是數據交互困難，動畫效果有限。  Flash，這個需要懂得Flex編程。  當然除此之外，還有一只炒作的“HTML5”，但這項技術成熟尚需時間，尤其是在“China”（從XP的裝機量就能看出來）。下面看今天的主角，“Silverlight”下的“Visifire”圖表插件。

        

 

 對應的“XAML”代碼：

        

         1 <vc:Chart Theme="Theme1" UniqueColors="False" LightingEnabled="False"  Name="SLChart" IndicatorEnabled="True" >

 
           2              
          < 
          vc:Chart.Titles 
          > 
          
 
           3                  
          < 
          vc:Title  
          Text 
          ="伯克利  對比表" 
            FontColor 
          ="#000000" 
           FontSize 
          ="23" 
           FontWeight 
          ="Bold" 
          /> 
          
 
           4                  
          < 
          vc:Title  
          Text 
          ="2012-07-06，2011-07-06" 
            FontColor 
          ="#000000" 
           FontSize 
          ="14" 
          /> 
          
 
           5              
          </ 
          vc:Chart.Titles 
          > 
          
 
           6  
          
 
           7  
          
 
           8              
          < 
          vc:Chart.AxesY 
          > 
          
 
           9  
          
 
          10                  
          < 
          vc:Axis  
          LineColor 
          ="#000000" 
            
 
          11  
                                  LineThickness 
          ="1" 
            
 
          12  
                                  Title 
          ="消耗量" 
            
 
          13  
                                  Suffix 
          ="kWh" 
           
 
          14  
                                  Enabled 
          ="True" 
            
 
          15  
                                  StartFromZero 
          ="True" 
            
 
          16  
                                  AxisType 
          ="Primary" 
            
 
          17  
                                  LineStyle 
          ="Solid" 
          > 
          
 
          18                      
          < 
          vc:Axis.AxisLabels 
          > 
          
 
          19                          
          < 
          vc:AxisLabels  
          FontSize 
          ="13" 
            
          /> 
          
 
          20                      
          </ 
          vc:Axis.AxisLabels 
          > 
          
 
          21                  
          </ 
          vc:Axis 
          > 
          
 
          22                  
          < 
          vc:Axis  
          LineColor 
          ="#000000" 
            
 
          23  
                                  LineThickness 
          ="1" 
            
 
          24  
                                  Title 
          ="氣溫" 
            
 
          25  
                                  Enabled 
          ="True" 
            
 
          26  
                                  StartFromZero 
          ="True" 
            
 
          27  
                                  AxisType 
          ="Secondary" 
            
 
          28  
                                  Suffix 
          ="℃" 
           
 
          29  
                                  LineStyle 
          ="Solid" 
          > 
          
 
          30                      
          < 
          vc:Axis.AxisLabels 
          > 
          
 
          31                          
          < 
          vc:AxisLabels  
          FontSize 
          ="13" 
            
          /> 
          
 
          32                      
          </ 
          vc:Axis.AxisLabels 
          > 
          
 
          33                  
          </ 
          vc:Axis 
          > 
          
 
          34              
          </ 
          vc:Chart.AxesY 
          > 
          
 
          35  
          
 
          36              
          < 
          vc:Chart.AxesX 
          > 
          
 
          37  
          
 
          38                  
          < 
          vc:Axis  
          LineColor 
          ="#000000" 
           
 
          39  
                                  Interval 
          ="1" 
          
 
          40  
                                  LineThickness 
          ="1" 
            
 
          41  
                                  Title 
          ="時間（Day）" 
            
 
          42  
                                  Enabled 
          ="True" 
           
 
          43  
                                  
 
          44  
                                  AxisType 
          ="Primary" 
            
 
          45  
                                  LineStyle 
          ="Solid" 
          > 
          
 
          46                      
          < 
          vc:Axis.AxisLabels 
          > 
          
 
          47  
          
 
          48                          
          < 
          vc:AxisLabels  
          FontSize 
          ="13" 
          /> 
          
 
          49  
          
 
          50                      
          </ 
          vc:Axis.AxisLabels 
          > 
          
 
          51                  
          </ 
          vc:Axis 
          > 
          
 
          52              
          </ 
          vc:Chart.AxesX 
          > 
          
 
          53  
          
 
          54  
          
 
          55              
          < 
          vc:Chart.Series 
          > 
          
 
          56                  
          < 
          vc:DataSeries  
          RenderAs 
          ="Column" 
           AxisYType 
          ="Primary" 
           LegendText 
          ="消耗量" 
           LabelEnabled 
          ="True" 
          > 
          
 
          57                      
          < 
          vc:DataSeries.DataPoints 
          > 
          
 
          58                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2012-07-06" 
           YValue 
          ="10000" 
            ToolTipText 
          ="2317kWh" 
          ></ 
          vc:DataPoint 
          > 
          
 
          59                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2011-07-06" 
           YValue 
          ="11000" 
           ToolTipText 
          ="1297kWh" 
          ></ 
          vc:DataPoint 
          > 
          
 
          60                      
          </ 
          vc:DataSeries.DataPoints 
          > 
          
 
          61                  
          </ 
          vc:DataSeries 
          > 
          
 
          62                  
          < 
          vc:DataSeries  
          RenderAs 
          ="Line" 
           AxisYType 
          ="Secondary" 
           LegendText 
          ="最低氣溫" 
          > 
          
 
          63                      
          < 
          vc:DataSeries.DataPoints 
          > 
          
 
          64                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2012-07-10" 
           YValue 
          ="25" 
           ToolTipText 
          ="最低氣溫，15℃" 
          ></ 
          vc:DataPoint 
          > 
          
 
          65                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2011-07-06" 
           YValue 
          ="28" 
           ToolTipText 
          ="最低氣溫，18℃" 
          ></ 
          vc:DataPoint 
          > 
          
 
          66                      
          </ 
          vc:DataSeries.DataPoints 
          > 
          
 
          67                  
          </ 
          vc:DataSeries 
          > 
          
 
          68  
          
 
          69                  
          < 
          vc:DataSeries  
          RenderAs 
          ="Line" 
           AxisYType 
          ="Secondary" 
           LegendText 
          ="最高氣溫" 
          > 
          
 
          70                      
          < 
          vc:DataSeries.DataPoints 
          > 
          
 
          71                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2012-07-10" 
           YValue 
          ="35" 
           ToolTipText 
          ="最高氣溫，35℃" 
          ></ 
          vc:DataPoint 
          > 
          
 
          72                          
          < 
          vc:DataPoint  
          AxisXLabel 
          ="2011-07-06" 
           YValue 
          ="38" 
           ToolTipText 
          ="最高氣溫，38℃" 
          ></ 
          vc:DataPoint 
          > 
          
 
          73                      
          </ 
          vc:DataSeries.DataPoints 
          > 
          
 
          74                  
          </ 
          vc:DataSeries 
          > 
          
 
          75              
          </ 
          vc:Chart.Series 
          > 
          
 
          76          
          </ 
          vc:Chart 
          > 
         

 

      這里主要介紹它的幾個主要的屬性和綁定數據的方法。

      一、主要屬性

          Chart（圖表）： 

          Theme ：主題系列。 

          UniqueColors ：顏色搭配是否唯一。

          LightingEnabled：背景高亮（這個效果不太好，一般設為Flase）。

          IndicatorEnabled：“柱形圖”上直接顯示數據。

          Titles：標題系列，圖表可以有“N”個標題。

          View3D：“3D”效果展示。

          AxesY：“Y”軸，圖表中如Demo所示，可以有多個“Y”軸。

 

          Axis（軸線）：

                  LineColor ：軸顏色。

                  LineThickness：軸線粗細。

                  Title：軸線標題。

                  Suffix：單位后綴

                  StartFromZero：軸數據是否由“0”開始。

                  AxisType：軸線類型，第一條，第二條，還是第N條。

                  Interval ：刻度跨度。

                  另外還有“刻度最大值”和“刻度最小值”等。

 

         Series （數據系列，圖表的關鍵元素）：

                DataPoints：數據點列。

                RenderAs：圖表類型。柱、餅、線、Bar、堆積等等。

                AxisYType：對應的“Y”軸。

                LegendText：圖列。

                DataPoints ：數據點列。

                   

          DataPoint（數據點）：

          AxisXLabel ：X軸標簽。

          YValue：對應“Y”軸值。

          ToolTipText ：數據點提示信息。

  二、主要數據綁定方法

        1、“DataPoint”數據點直接寫在“ Series ”中。

        2、 “DataMappings”直接映射綁定。

                1 <vc:Chart.Series>

 2                          < vc:DataSeries  RenderAs ="Column"   AxisYType ="Primary"  LegendText ="數量統計"  LabelEnabled ="True"   >
 3                              < vc:DataSeries.DataMappings >
 4                                  < vc:DataMapping  MemberName ="AxisXLabel"  Path ="DpMeter" />
 5                                  < vc:DataMapping  MemberName ="YValue"  Path ="DpSumQty" />
 6                                  < vc:DataMapping  MemberName ="ToolTipText"  Path ="DpRegion" />
 7 
 8                              </ vc:DataSeries.DataMappings >
 9 
10                          </ vc:DataSeries >
11 

12                     </vc:Chart.Series> 

 

           ObservableCollection<MyChartsService.WarnCountTop10> datas = e.Result;

            SLChart.Series[0].DataSource = e.Result;

            bi_Busy.IsBusy = false;

 

           PS:LabelText="#AxisXLabel,#Percentage%"，這樣可以設置顯示百分比。

 

         3、后台實例化“DataSeries ds = new DataSeries();” 

             DataSeries ds = new DataSeries();

             ds.LegendText = r.DpTypeName;

               for (int i = 1; i < 25; i++)

                {

                       DataPoint dp = new DataPoint();

 

                      double value_double = r.DpDatasArry[i-1];

                           dp.AxisXLabel = time_str;

                           dp.YValue = value_double; 

 

                       dp.ToolTipText = r.DpTypeName + "，"  + Common.ToDecimalOne(value_double);

                       ds.DataPoints.Add(dp);

                 } 

  

                  SLChart.AxesX[0].Title = "時間（小時，Hour）" ;
                  SLChart.Series.Add(ds); 

 

  綁定頂一下唄

 

Demo下載地址