这种折线图表怎么做？

Question

我想做一个类似下面这个网站“北京天气实况”的折线图表http://www.weather.com.cn/html/weather/101010100.shtml
请问这个是怎么做，请高手给个例子，谢谢了

Answer 1

#region 生成折线图
        public static string DrawImage(float[] oFloat, bool isText,string path) {
            #region 数值
            int width = 660;        //图片宽度
            int height = 220;       //图片高度
            int iX = 20;            //左,下方向留白
            int iH = height - 20;   //显示区域高度
            int iW = width - 20;    //显示区域宽度            float fHeight = 200;         //纵轴总长度
            float fVirtualHeight = fHeight;    //虚拟总长度
                                                //算出最大的正整数,如输入300,则最大数为400
            float fTempMaxNum = MaxFloat(oFloat);
            while (fVirtualHeight < fTempMaxNum) {
                fVirtualHeight += 100;
            }
            
            float fCount = 10;                       //纵轴分成10份,固定
            float fPx = fHeight / fCount;            //每份多少像素,固定
            float fRmb = fVirtualHeight / fCount;    //每份表示多少钱,根据参数中最大数决定
            float fPPx = fPx / fRmb;                 //每钱多少像素,
            #endregion            #region 构造图用
            //构造BITMAP
            Bitmap oBmap = new Bitmap(width, height);            //新建一个画板
            Graphics g = Graphics.FromImage(oBmap);
            
            //设置高质量插值法
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
            
            //设置高质量,低速度呈现平滑程度
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;            //清空画布并以透明背景色填充
            g.Clear(Color.White);            //新建钢笔,灰色,1px
            Pen oPen = new Pen(Color.Gray);
            Pen oSpen = new Pen(Color.Silver);
            Pen oRpen = new Pen(Color.Red);            //定义黑色过渡型笔刷
            LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, oBmap.Width, oBmap.Height), Color.Black, Color.Black, 1.2F, true);
            LinearGradientBrush brush_red = new LinearGradientBrush(new Rectangle(0, 0, oBmap.Width, oBmap.Height), Color.Red, Color.Red, 1.2F, true);            #endregion            //计算宽度,高度份数
            float wLens = iW / oFloat.Length;            #region 画横纵坐标
            //线帽
            oPen.EndCap = LineCap.ArrowAnchor;
            //画横纵坐标
            g.DrawLine(oPen, iX, iH, iX, iX - 10);
            g.DrawString("y", new Font("Arial", 8), brush, 25, 1);
            g.DrawLine(oPen, iX, iH, iW + 10, iH);
            g.DrawString("x", new Font("Arial", 8), brush, iW + 10, iH - 1);
            //输出标题
            //g.DrawString(string.Format("CreateDate {0}", DateTime.Now.ToString()), new Font("Arial", 8), brush, iW / 2, 1);
            #endregion            #region 画横坐标
            //画横坐标
            for (int i = 0; i < oFloat.Length; i++) {
                //输出小竖线
                if (i == DateTime.Now.Day) {
                    g.DrawString(string.Format("{0}", i), new Font("Arial", 7), brush_red, (float)wLens * i + iX - 4.5f, iH);
                } else {
                    g.DrawString(string.Format("{0}", i), new Font("Arial", 7), brush, (float)wLens * i + iX - 4.5f, iH);
                }
                g.DrawLine(oSpen, wLens * (i + 1) + iX, iH, wLens * (i + 1) + iX, iX);//画长线
            }
            #endregion            #region 画纵坐标
            //画纵坐标
            for (int i = 0; i < fCount; i++) {
                if (i != 0) {
                    g.DrawString(string.Format("{0}", fVirtualHeight - fRmb * i), new Font("Arial", 7), brush, (float)iX - 20.5f, i * fPx - 5);
                }
                g.DrawLine(oSpen, iX, i * fPx + iX, iW, i * fPx + iX);//长线
            }
            #endregion            #region 生成点列
            //生成点列
            PointF[] oPoint = new PointF[oFloat.Length];
            for (int i = 0; i < oFloat.Length; i++) {
                //记录坐标
                oPoint[i] = new PointF(i * wLens + iX, iH - oFloat[i] * fPPx);                //输出标识
                if (isText && oFloat[i] > 0) {
                    g.DrawString(string.Format("{0}", oFloat[i]), new Font("Arial", 8), brush, oPoint[i]);
                }
            }
            #endregion
            g.DrawLines(oRpen, oPoint);
            //g.DrawCurve(oRpen, oPoint);            //生成图片
            oBmap.Save(path, ImageFormat.Gif);            oBmap.Dispose();
            g.Dispose();
            return string.Empty;
        }
        #endregion

Answer 2

折现图可用 zedgraph或owc等控件实现

Answer 3

silverlight的报表要不要?点我

Answer 4

这个是用Flex做的CSDN有这个版块，http://forum.csdn.net/SList/Flex

Answer 5

建议楼主可以使用第三方报表，也不需要编程，两分钟就可以搞定了（如果熟练的话，或许还用不着哦，呵呵。。）
具体操作：插入图表样式，选择折线图，然后通过绑定数据（就是24小时对应的气温温度），点击确定就可以了，就是这么简单，如果数据库中的数据有变动，折线图数值展现也会随着改变。
我用的是FineReport报表，很多图表功能都能实现，建议可以现在试用的，操作及其简单的，他们的文档说明还很详细呢