使用 Microsoft Chart Controls Part 5 – 在 ASP.NET MVC 架构下,使用 ToolTip 功能

摘要:使用 Microsoft Chart Controls Part 5 - 在 ASP.NET MVC 架构下,使用 ToolTip 功能


这 几日为了在 ASP.NET MVC 中,使用 Chart 的 ToolTip 功能大伤脑筋。因为我的写法是,在后端将 Chart 设定好相关格式,并且将值填入其中;传到前端时,就是一个 Image 档。所以,一个完完全全的图档怎么可能拥有 ToolTip 呢!? 经过这几天与好伙伴 Sam 的努力,及保哥的指点, 中于完成了这好玩的功能。其实说穿了,ToolTip 就是当你选到图档上的长条图、圆饼图、折线图等等,会显示数据或是相关文字的。在一般 HTML Tag 的写法,是一个 Image 加上 一个 Map 来显示,而佛心来的Microsoft Chart Controls,只是设定好参数后,即可轻松完成。以下就来看看呗...

CS Code:

MyDataContext db = new MyDataContext();

public class newItem
{
    public string dt { get; set; }
    public int total { get; set; }
}

public ActionResult Index()
{
    Chart c = GetChart();

    c.ImageLocation = Path.GetTempPath();
    c.ImageStorageMode = ImageStorageMode.UseHttpHandler;

    StringBuilder sb = new StringBuilder();
    StringWriter sw = new StringWriter(sb);
    HtmlTextWriter htw = new HtmlTextWriter(sw);

    c.RenderControl(htw);

    return Content(sb.ToString());
}

private Chart GetChart()
{
    Chart c = new Chart();

    c.ID = "Chart1";
    c.Height = System.Web.UI.WebControls.Unit.Pixel(600);
    c.Width = System.Web.UI.WebControls.Unit.Pixel(800);
    c.Palette = ChartColorPalette.BrightPastel;
    c.ImageType = ChartImageType.Png;
    c.BorderlineDashStyle = ChartDashStyle.Solid;
    c.BackSecondaryColor = System.Drawing.Color.White;
    c.BackGradientStyle = GradientStyle.TopBottom;
    c.BorderlineWidth = 2;
    c.BackColor = System.Drawing.ColorTranslator.FromHtml("#D3DFF0");

    c.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

    ChartArea ca = new ChartArea();
    ca.Name = "ChartArea1";
    ca.BorderColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
    ca.BorderDashStyle = ChartDashStyle.Solid;
    ca.BackSecondaryColor = System.Drawing.Color.White;
    ca.BackColor = System.Drawing.Color.FromArgb(64, 165, 191, 228);
    ca.ShadowColor = System.Drawing.Color.Transparent;
    ca.BackGradientStyle = GradientStyle.TopBottom;
    ca.Area3DStyle.Rotation = 10;
    ca.Area3DStyle.Perspective = 10;
    ca.Area3DStyle.Inclination = 15;
    ca.Area3DStyle.IsRightAngleAxes = false;
    ca.Area3DStyle.WallWidth = 0;
    ca.Area3DStyle.IsClustered = false;
    ca.AxisY.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
    ca.AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25f, System.Drawing.FontStyle.Bold);
    ca.AxisY.MajorGrid.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
    ca.AxisX.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
    ca.AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25f, System.Drawing.FontStyle.Bold);
    ca.AxisX.MajorGrid.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
    c.ChartAreas.Add(ca);

    Legend cl = new Legend();
    cl.Name = "Default1";
    cl.IsTextAutoFit = true;
    cl.BackColor = System.Drawing.Color.Transparent;
    cl.Font = new System.Drawing.Font("Trebuchet MS", 8.25f, System.Drawing.FontStyle.Bold);
    cl.IsDockedInsideChartArea = false;
    cl.DockedToChartArea = "ChartArea1";
    c.Legends.Add(cl);

    //让显示的X,不会跳着显示
    c.ChartAreas["ChartArea1"].AxisX.Interval = 1;

    Series s = new Series();
    s.Name = "Series 1";
    c.Series.Add("Series 1");

    var result = from e in db.Employees
                 group e by e.TitleOfCourtesy into g
                 orderby g.Key ascending
                 select new newItem
                 {
                     dt = g.Key,
                     total = g.Count()
                 };

    c.Series["Series 1"].Points.DataBind(result, "dt", "total", null);

    c.Series["Series 1"].ChartArea = "ChartArea1";

    c.Series["Series 1"].Legend = "Default1";

    //定义当鼠标移到图上时将呈现的数据或是文字
    c.Series["Series 1"].ToolTip = "Total: #VALY";

    //将说明在下方显示并至中
    c.Legends["Default1"].Docking = Docking.Bottom;
    c.Legends["Default1"].Alignment = System.Drawing.StringAlignment.Center;

    c.Series["Series 1"]["PointWidth"] = "0.6";

    return c;
}

Html Code:



结果:



这样一来,不怕长条图、圆饼图、折线图等,因为数据太过密集,导致显示数据会挤在一起噜!!!