全栈小课堂

记录一个小菜鸟到老菜鸟的心酸历程

导航

《转》Silverlight图表制作

Posted on 2012-09-13 16:58  百里守约  阅读(217)  评论(0编辑  收藏  举报

  需要做动态的,具有丰富动画效果的图表,大体有三个选择,“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下载地址 

posted @ 2012-09-12 19:46 星空(StarrySky) 阅读(927) 评论(2) 编辑

2012年9月11日

"PIVOT 和 UNPIVOT"函数

     做报表的时候,大多都会遇到“数据透视”,也就是“行列转换”。这些操作都会用到 "PIVOT 和 UNPIVOT"函数。

     根据“MSDN”的讲解,参考地址(http://technet.microsoft.com/zh-cn/library/ms177410.aspx ),但是不是太好理解,下面根据自己的理解介绍下。有不当的地方还请大师们多多指正。

     MSDN实例:

             select * from  

                          (select  DaysToManufacture,StandardCost  from   Production.Product)  as  tablesource

                          pivot  

                          (sum(StandardCost)  for DaysToManufacture in ([0],[1],[2],[3],[4]))

                          as newtable 

     1、“源数据查询”: select  DaysToManufacture,StandardCost  from   Production.Product

           简单理解就是“Pivot”要操作的数据集

     2、 “pivot ”函数:(sum(StandardCost)  for DaysToManufacture in ([0],[1],[2],[3],[4]))

            根据“StandardCost ”(源数据列)对“DaysToManufacture ” 进行透视,透视后的列为“[0],[1],[2],[3],[4] ”。

     3、查询透视后的新的结果集:select  *   from   .......   newtable 

 

      注意:“透视数据”自动根据“非透视列”进行分组,比如下面的表。

       

      根据“SumQty”对“DAhour”列进行透视,这时您会发现“DAHour”中存在重复的“13、14、15、16”等,但是它们的 “BuildingNo”是不同的,这时就会自动按照“BuildingNo”进行分组,从而变为不同的记录(不然只有一条记录)。“DAHour”的值 变为了列的标题,而SumQty中的值则变为了“DAHour”列对应的值。

        SQL语句如下:

        select * from  (select BuildingNo,DAHour,SumQty  from  EnergyDataSum  ed    where   buildingno  in  ('310000Fa001','310000Fe001')  ) as  pt
       pivot (sum(SumQty) for DAHour in ([00],[01],[02],[03],[04],[05],[06],[07],[08],[09],[10],[11],[12],[13],[14],[15],[16],[17],[18],[19],[20],[21],[22],[23]))  as  rt  

        

       “UNPivot”函数

        顾名思义,这是 “pivot ”函数的逆运算。

        MSDN中的实例如下:

          1 CREATE TABLE pvt (VendorID int, Emp1 int, Emp2 int,

 2     Emp3 int, Emp4 int, Emp5 int);
 3 GO
 4 INSERT INTO pvt VALUES (1,4,3,5,4,4);
 5 INSERT INTO pvt VALUES (2,4,1,5,5,5);
 6 INSERT INTO pvt VALUES (3,4,3,5,4,4);
 7 INSERT INTO pvt VALUES (4,4,2,5,5,4);
 8 INSERT INTO pvt VALUES (5,5,1,5,5,5);
 9 
10 go
11 select *  from  pvt
12 go
13 
14 
15 SELECT VendorID, Employees, Orderbs
16 FROM 
17    (SELECT VendorID, Emp1, Emp2, Emp3, Emp4, Emp5
18    FROM pvt) p
19 UNPIVOT
20    (Orderbs FOR Employees IN 
21       (Emp1, Emp2, Emp3, Emp4, Emp5)
22 )AS unpvt;

       

       唯一不同的地方就是函数的名字(废话),“UNPIVOT ”(数据源列   for  标题列  in (标题) )

 

       有什么不对的地方还请多多指正。 

       

       另外,多说一点,关于“SQLServer2008”评估版的升级问题。

        1、如果新安装 “SQLServer2008”评估版,请在安装时输入序列号。

             开发版: PTTFM-X467G-P7RH2-3Q6CG-4DMYB
         企业版: JD8Y6-HQG69-P9H84-XDTPG-34MBB 
        2、已经安装 “SQLServer2008”评估版,而且过了评估期了,请如下操作。

              2.1修改注册表:
               HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SQL Server\100\ConfigurationState里的“CommonFiles”值改成3 

              2.2 点击【开始】—【所有程序】—【Microsoft SQL Server 2008】—【配置工具】—{SQL Server 安装中心}

              2.3 点击左侧的【维护】,在点击右侧的【版本升级】,接着按照提示一直点下一步,到产品密钥的时候输入
              开发版: PTTFM-X467G-P7RH2-3Q6CG-4DMYB
              企业版: JD8Y6-HQG69-P9H84-XDTPG-34MBB