ASP MVC5-使用Url.Action函数的向下钻取图表

Question

I am working in ASP MVC5 to create a chart with drill down capabilities. From this page , I was able to get the following code:

Here is the code to create the image map and cache the chart:

public ActionResult ChartMap(int? id, string name)
{
    Chart chart = new Chart();
    // Get data for id and add chart area, series, points, etc. to chart
    // Make sure to use Url.Action for any drill-down URLs
    MemoryStream ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);
    Session["Chart"] = ms.ToArray();
    return Content(chart.GetHtmlImageMap(name));
}

Then the code to render the cached chart becomes as follows:

public ActionResult Chart(int? id)
{
    byte[] data = Session["Chart"] as byte[];
    return File(data, "img/png");
}

Then this is the code for your view:

<img src="<%= Url.Action("Chart", new { id = Model.Id }) %>" usemap="#MyMap" />
<% Html.RenderAction("ChartMap", new { id = Model.Id, name = "MyMap" }); %>

This works fine for displaying the chart itself once I add in my data. However, I am having a hard time figuring out how to use Url.Action as it says to create the drilldown functionality. For example, suppose underneath the comment block in the above code I add data to the chart to be displayed as a bar graph as well as chart formatting as follows:

        chart.Width = 500;
        chart.Height = 500;
        chart.Titles.Add("Test Title");
        chart.ChartAreas.Add(new ChartArea());

        Series series = new Series();
        series.Points.AddXY("ValueA", 3);
        series.Points.AddXY("ValueB", 7);
        series.Points.AddXY("ValueC", 5);
        series.Points.AddXY("ValueD", 4);
        series.Points.AddXY("ValueE", 2);

Suppose when a bar on the graph is clicked, it should take the user to /Home/MyTestPage?value=x, where x is the name given for that column (eg ValueA). While this code properly displays as a graph, I cannot figure out where or how to had calls to Url.Action related to this so that clicking the chart routes to the proper page. If anyone has any suggestions it would be greatly appreciated. Thanks.

Answer 1

For future references for others, I found some changes to the above code here that solve the problem. The major changes are:

1) When setting values for chart , add the line chart.IsMapEnabled = true;

2) Create series points as follows:

series.Points.Add(new DataPoint {
AxisLabel = "A",
YValues = new double[] {1},
Url = "MyTestPage?value=A");

3) Replace the return statement in ChartMap with the following:

return Content("<img src='" + Url.Action("Chart").ToString() + "' usemap='#MyMap'/>" + chart.GetHtmlImageMap("MyMap"));