SL-折线报表

   学SL也有段时间了，中间停停走走的，耽误了不少时间，前段时间一哥们说看看年底情况如何，到他们公司去试试水，所以又拣起来弄弄，切入点就先从报表开始吧，这样做感觉比较切实际一些。

   第一篇先来一个简单的静态报表样式吧，效果图如下：

个人觉得还不错了，呵呵。。。

其实这个很简单的功能了，没有处理Y轴方向和实际数据的比值，所以测试数据的真实值都在0~600之间。

这里是前台的代码：

    

<Canvas Height="900" Width="800" Margin=" 20 0 0 0"> <!--这里是具体的图形内容--> <Canvas Height="600" Background="Black" Width="600" Name="canvas_Chart" Canvas.Top="0" Canvas.Left="60"></Canvas><!--创建左侧的数据值--> <Grid Width="43" Height="600" Canvas.Left="0" Canvas.Top="0"> <Grid.RowDefinitions> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="50"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="0" Grid.Row="11" VerticalAlignment="Bottom"></TextBlock> <TextBlock Text="50" Grid.Column="0" Grid.Row="11" VerticalAlignment="Top"></TextBlock> <TextBlock Text="100" Grid.Column="0" Grid.Row="10" VerticalAlignment="Top"></TextBlock> <TextBlock Text="150" Grid.Column="0" Grid.Row="9" VerticalAlignment="Top"></TextBlock> <TextBlock Text="200" Grid.Column="0" Grid.Row="8" VerticalAlignment="Top"></TextBlock> <TextBlock Text="250" Grid.Column="0" Grid.Row="7" VerticalAlignment="Top"></TextBlock> <TextBlock Text="300" Grid.Column="0" Grid.Row="6" VerticalAlignment="Top"></TextBlock> <TextBlock Text="350" Grid.Column="0" Grid.Row="5" VerticalAlignment="Top"></TextBlock> <TextBlock Text="400" Grid.Column="0" Grid.Row="4" VerticalAlignment="Top"></TextBlock> <TextBlock Text="450" Grid.Column="0" Grid.Row="3" VerticalAlignment="Top"></TextBlock> <TextBlock Text="500" Grid.Column="0" Grid.Row="2" VerticalAlignment="Top"></TextBlock> <TextBlock Text="550" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top"></TextBlock> <TextBlock Text="600" Grid.Column="0" Grid.Row="0" VerticalAlignment="Top"></TextBlock> </Grid> </Canvas>

后台创建数据级线段的内容：

  

//创建一系列的坐标值，即每个月的具体产值，X轴这里取的间隔是50pixelprivate PointCollection pc = new PointCollection(); //主函数public MainPage() { InitializeComponent();//创建线段 LoadLine();//创建圆点 LoadEllipse();//创建对应圆点的备注说明即对应的TextBlock BiuldText(); }private void LoadLine()        {            pc.Add(new Point(10, canvas_Chart.Height - 550));            pc.Add(new Point(60, canvas_Chart.Height - 400));            pc.Add(new Point(110, canvas_Chart.Height - 432));            pc.Add(new Point(160, canvas_Chart.Height - 233));            pc.Add(new Point(210, canvas_Chart.Height - 455));            pc.Add(new Point(260, canvas_Chart.Height - 123));            pc.Add(new Point(310, canvas_Chart.Height - 455));            pc.Add(new Point(360, canvas_Chart.Height - 562));            pc.Add(new Point(410, canvas_Chart.Height - 41));            #region 创建一系列对应坐标的线段            Polyline pl = new Polyline();            pl.Stroke = new SolidColorBrush(Colors.Red);            pl.StrokeThickness = 2;            pl.Points = pc;            RenderEffec(ref pl);            canvas_Chart.Children.Add(pl);            #endregion}//添加对应的数据节点        private void LoadEllipse()        {            int i = 1;            foreach (Point p in pc) {                Ellipse ep = new Ellipse();                ep.Width = ep.Height = 10;                ep.Fill = new SolidColorBrush(Colors.White);                ep.VerticalAlignment = System.Windows.VerticalAlignment.Top;                ep.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;                //设置定位                double left = p.X -ep.Width / 2;                double top = p.Y -ep.Height / 2;                ep.Margin = new Thickness(left, top, 0, 0);                ToolTipService.SetToolTip(ep, string.Format("这是{0}月分的数据({1})", i, canvas_Chart.Height- p.Y));                canvas_Chart.Children.Add(ep);                i++;            }        }//添加对应的数据节点        private void LoadEllipse()        {            int i = 1;            foreach (Point p in pc) {                Ellipse ep = new Ellipse();                ep.Width = ep.Height = 10;                ep.Fill = new SolidColorBrush(Colors.White);                ep.VerticalAlignment = System.Windows.VerticalAlignment.Top;                ep.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;                //设置定位                double left = p.X -ep.Width / 2;                double top = p.Y -ep.Height / 2;                ep.Margin = new Thickness(left, top, 0, 0);                ToolTipService.SetToolTip(ep, string.Format("这是{0}月分的数据({1})", i, canvas_Chart.Height- p.Y));                canvas_Chart.Children.Add(ep);                i++;            }        }

先一个静态的吧，下一步做动画效果。。

转载于:https://www.cnblogs.com/netDream/archive/2012/03/10/SL_staticReport.html

相关资源：JAVA上百实例源码以及开源项目