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轴这里取的间隔是50pixel
private 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