ASP MVC5 - 使用 Url.Action 函数的向下钻取图表
ASP MVC5 - Drilldown chart using Url.Action function
我正在 ASP MVC5 中创建具有向下钻取功能的图表。从 this page,我能够得到以下代码:
下面是创建图像地图和缓存图表的代码:
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));
}
那么渲染缓存图表的代码就变成了这样:
public ActionResult Chart(int? id)
{
byte[] data = Session["Chart"] as byte[];
return File(data, "img/png");
}
那么这是您的视图代码:
<img src="<%= Url.Action("Chart", new { id = Model.Id }) %>" usemap="#MyMap" />
<% Html.RenderAction("ChartMap", new { id = Model.Id, name = "MyMap" }); %>
一旦我添加了数据,这就可以很好地显示图表本身。但是,我很难弄清楚如何使用 Url.Action 创建向下钻取功能。例如,假设在上述代码的注释块下方,我将数据添加到图表以显示为条形图以及图表格式如下:
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);
假设单击图表上的条形图时,用户应转到 /Home/MyTestPage?value=x,其中 x 是为该列指定的名称(例如 ValueA)。虽然此代码正确显示为图表,但我无法弄清楚在哪里或如何调用与此相关的 Url.Action,以便单击图表路由到正确的页面。如果有人有任何建议,将不胜感激。谢谢。
为了其他人将来的参考,我发现对上面的代码 here 进行了一些更改来解决问题。主要变化是:
1) 当设置 chart
的值时,添加行 chart.IsMapEnabled = true;
2) 创建系列点如下:
series.Points.Add(new DataPoint {
AxisLabel = "A",
YValues = new double[] {1},
Url = "MyTestPage?value=A");
3) 将 ChartMap 中的 return 语句替换为以下内容:
return Content("<img src='" + Url.Action("Chart").ToString() + "' usemap='#MyMap'/>" + chart.GetHtmlImageMap("MyMap"));
我正在 ASP MVC5 中创建具有向下钻取功能的图表。从 this page,我能够得到以下代码:
下面是创建图像地图和缓存图表的代码:
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));
}
那么渲染缓存图表的代码就变成了这样:
public ActionResult Chart(int? id)
{
byte[] data = Session["Chart"] as byte[];
return File(data, "img/png");
}
那么这是您的视图代码:
<img src="<%= Url.Action("Chart", new { id = Model.Id }) %>" usemap="#MyMap" />
<% Html.RenderAction("ChartMap", new { id = Model.Id, name = "MyMap" }); %>
一旦我添加了数据,这就可以很好地显示图表本身。但是,我很难弄清楚如何使用 Url.Action 创建向下钻取功能。例如,假设在上述代码的注释块下方,我将数据添加到图表以显示为条形图以及图表格式如下:
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);
假设单击图表上的条形图时,用户应转到 /Home/MyTestPage?value=x,其中 x 是为该列指定的名称(例如 ValueA)。虽然此代码正确显示为图表,但我无法弄清楚在哪里或如何调用与此相关的 Url.Action,以便单击图表路由到正确的页面。如果有人有任何建议,将不胜感激。谢谢。
为了其他人将来的参考,我发现对上面的代码 here 进行了一些更改来解决问题。主要变化是:
1) 当设置 chart
的值时,添加行 chart.IsMapEnabled = true;
2) 创建系列点如下:
series.Points.Add(new DataPoint {
AxisLabel = "A",
YValues = new double[] {1},
Url = "MyTestPage?value=A");
3) 将 ChartMap 中的 return 语句替换为以下内容:
return Content("<img src='" + Url.Action("Chart").ToString() + "' usemap='#MyMap'/>" + chart.GetHtmlImageMap("MyMap"));