ZedGraph图形空间使用心得

这次项目需要画K线图，我选着用的ZedGraph。这里吧自己使用的一些体会写下来。

首先是ZedGraph控件添加，主要是ZedGraph.dll和ZedGraph.Web.dll因为我是asp.net开发所以两个都需要。这个添加引用就可以了。

然后在aspx加入

<%@ Register assembly="ZedGraph.Web" namespace="ZedGraph.Web" tagprefix="cc1" %>

<cc1:ZedGraphWeb ID="ZedGraphWeb1" runat="server" Height="350"
    onrendergraph="ZedGraphWeb1_RenderGraph" RenderedImagePath="~/pic/"
        Width="560">

</cc1:ZedGraphWeb>

cs文件中

 protected void ZedGraphWeb1_RenderGraph(ZedGraph.Web.ZedGraphWeb webObject, Graphics g, MasterPane pane)
        {

            GraphPane myPane = (GraphPane)pane[0];

            // Set the title and axis labels   
            myPane.Title.Text = "K线图";
            myPane.XAxis.Title.Text = "日期";
            myPane.XAxis.Title.FontSpec.FontColor = Color.Black;
            myPane.YAxis.Title.Text = "价格";
            myPane.YAxis.Title.FontSpec.FontColor = Color.Black;

            //Get Data
            StockPointList spl = new StockPointList();
            Random rand = new Random();

            // First day is jan 1st
            DateTime Date=DateTime.Now;
            XDate xDate = new XDate(Date.Year, Date.Month, Date.Day);
            double open = 50.0;//收盘价

            for (int i = 0; i < 24; i++)
            {
                double x = xDate.XLDate;
                double close = open + rand.NextDouble() * 10.0 - 5.0;//最新价
                double hi = Math.Max(open, close) + rand.NextDouble() * 1.0;//最高价
                double low = Math.Min(open, close) - rand.NextDouble() * 1.0;//最低价

                StockPt pt = new StockPt(x, hi, low, open, close, 100000);
                
                spl.Add(pt);


                open = close;
                // Advance one day
                xDate.AddHours(1.0);
                // but skip the weekends

                //if (XDate.XLDateToDayOfWeek(xDate.XLDate) == 6)
                //    xDate.AddDays(2.0);//除去双休日
            }

            PointPairList list1 = new PointPairList();
            PointPairList list2 = new PointPairList();
            for (int i = 0; i < 24; i++)
            {
                double x = open + rand.NextDouble() * 10.0 - 5.0;
                double y1 = 1.5 + Math.Sin(open*i * 0.2);
                double y2 = 3.0 * (1.5 + Math.Sin(open*i * 0.2));
                list1.Add(x, y1);
                list2.Add(x, y2);
            }
            //添加栅格线
            //myPane.XAxis.MajorGrid.IsVisible = true;
            //myPane.YAxis.MajorGrid.IsVisible = true;
            //myPane.XAxis.MajorGrid.Color = Color.LightGray;
            //myPane.YAxis.MajorGrid.Color = Color.LightGray;
            //myPane.YAxis.MajorGrid.DashOff = 0;
            //myPane.XAxis.MajorGrid.DashOff = 0;


            myPane.XAxis.Type = AxisType.Date;
            myPane.XAxis.Scale.Format = "HH-mm";

            ///
            //myPane.XAxis.Scale.FontSpec.Angle = 45;//X轴文字方向，0-90度
            开始Y轴坐标设置
            设置Y轴坐标的范围
            //myPane.YAxis.Scale.Max = Math.Round(maxhi * 1.2, 2);//Math.Ceiling(maxhi);
            //myPane.YAxis.Scale.Min = Math.Round(minlow * 0.8, 2);
            Y轴最大刻度，注意minStep只会显示刻度线不会显示刻度值
            //myPane.YAxis.Scale.MajorStep = 0.01;
            //myPane.XAxis.Scale.FontSpec.FontColor = Color.Black;
            //myPane.YAxis.Scale.FontSpec.FontColor = Color.Black;

            
            /// 

            myPane.XAxis.Type = AxisType.DateAsOrdinal;
            //myPane.Legend.FontSpec.Size = 18f;
            //myPane.Legend.Position = LegendPos.InsideTopRight;
            //myPane.Legend.Location = new Location(0.5f, 0.6f, CoordType.PaneFraction,
            //    AlignH.Right, AlignV.Top);
            LineItem myCurves = myPane.AddCurve("平均线",list1, Color.Red, SymbolType.Diamond);

            // Generate a blue curve with circle
            // symbols, and "Piper" in the legend
            LineItem myCurve2 = myPane.AddCurve("走势线",list2, Color.Blue, SymbolType.Circle);

            JapaneseCandleStickItem myCurve = myPane.AddJapaneseCandleStick("中石化", spl);

            myCurve.Stick.IsAutoSize = true;
            //myCurve.Stick.Color = Color.Blue;
            myCurve.Stick.FallingFill = new Fill(Color.Green);//下跌颜色
            myCurve.Stick.RisingFill = new Fill(Color.Red);//上扬颜色

            // pretty it up a little
            //myPane.Chart.Fill = new Fill(Color.LightBlue, Color.LightGoldenrodYellow, 135.0f);
            //myPane.Fill = new Fill(Color.Orange, Color.FromArgb(220, 220, 255), 45.0f);
            Color c1 = ColorTranslator.FromHtml("#ffffff");
            Color c2 = ColorTranslator.FromHtml("#ffd693");
            myPane.Chart.Fill = new Fill(c1);//图形区域颜色
            myPane.Fill = new Fill(c2);//整体颜色

            myPane.AxisChange();
        }

在lode事件里初始化

myPane = new GraphPane();

软后就是myPane属性添加可以按自己需求添加。

这些设置好运行就可以看到图表了。

这里在说一下鼠标以上出现介绍，这个困扰了我很久，网上找了很多都是winfrom的。asp.net使用的很少。其实控件是有自带的设置方法的用link

JapaneseCandleStickItem myCurve = myPane.AddJapaneseCandleStick("艺术品", spl);

            myCurve.Link = new Link(tishi, "#", "_blank");

这个就相当于是map热点图片

在开源的控件代码中可以看到坐标设置方法override public bool GetCoords( GraphPane pane, int i, out string coords )在JapaneseCandleStickItem类下。有需要的可以自己修改。

不过我发现ZedGraph.dll和ZedGraph.Web.dll这个dll的版本一样才能运行成功

如果需要画多条线也只要在ZedGraphWeb1_RenderGraph方法里自行添加就好比如LineItem myCurves = myPane.AddCurve("平均线", list1, Color.Red, SymbolType.None);

SymbolType这个是折点样式的设置。

我是用Timer控件来控制控件动态画图的

protected void time_Tick(object sender, EventArgs e)
    {
        myPane.XAxis.Scale.MaxAuto = true;
        myPane.AxisChange();
    }