[英]ASP MVC5 - Drilldown chart using Url.Action function
我正在ASP MVC5中創建具有向下鑽取功能的圖表。 從該頁面 ,我可以得到以下代碼:
這是創建圖像地圖並緩存圖表的代碼:
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的調用位置或調用方式,因此單擊圖表將轉到正確的頁面。 如果有人有任何建議,將不勝感激。 謝謝。
為了將來為其他人提供參考,我在這里發現了上述代碼的一些更改,以解決該問題。 主要變化是:
1)在為chart
設置值時,添加折線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"));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.