張小呆的碎碎唸

這 幾日為了在 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：

<div id="divShowChart"></div>

<script type="text/javascript" language="javascript">

    $('divShowChart').load('<%=Url.Action("Index","Chart")%>');

</script>

結果：



這樣一來，不怕長條圖、圓餅圖、折線圖等，因為數據太過密集，導致顯示資料會擠在一起嚕!!!