MVC でドリルダウン機能を備えた Microsoft Chart の実装を完了する方法を概念化するのに役立つ可能性があります。
-
28-10-2019 - |
質問
これについてはほとんど理解できましたが、部分的なページビューを返す必要があるのか、それとも画像だけを返す必要があるのか迷っています。
したがって、MVC でドリルダウン チャートを実装する必要がある方法は、次の場所で確認できます。 http://geekswithblogs.net/DougLampe/archive/2011/01/23/charts-in-asp.net-mvc-2-with-drill-down.aspx
ここで重要な点は、系列の URL プロパティを利用してチャート上の「下のレベル」に移動しているということです。
public ActionResult HistoricalChartMap(int reportID)
{
HistoricalChartData chartData = new HistoricalChartData(reportID, string.Format("Chart_{0}", Guid.NewGuid().ToString().Replace('-', 'a')));
LineChart chart = new LineChart(chartData);
foreach (Series series in chart.Series)
{
string postBackValue = series.PostBackValue;
series.Url = string.Format("../Chart/HistoricalDrillDown?ReportID={0}&PostBackValue={1}", reportID, postBackValue);
}
//Must call SaveImage before GetHtmlImageMap
var imgStream = new MemoryStream();
chart.SaveImage(imgStream);
imgStream.Seek(0, SeekOrigin.Begin);
string sessionKey = string.Format("HistoricalReport: {0}", reportID);
Session[sessionKey] = chart;
// Return the contents of the Stream to the client
return Content(chart.GetHtmlImageMap("HistoricalChartMap"));
}
URL が ChartController のメソッドを指していることに注意してください。
public ActionResult HistoricalDrillDown(int reportID, string postBackValue)
{
string sessionKey = string.Format("HistoricalReport: {0}", reportID);
LineChart lineChart = (LineChart)Session[sessionKey];
lineChart.DrillChart(postBackValue);
var imgStream = new MemoryStream();
lineChart.SaveImage(imgStream);
imgStream.Seek(0, SeekOrigin.Begin);
// Return the contents of the Stream to the client
return File(imgStream, "image/png");
}
HistoricalDrillDown は、部分ビューに表示したい新しい ChartImage を返しますが、この時点ではボールをドロップしています。 現在のチャート画像を返された画像に置き換えるにはどうすればよいですか? 現在、チャート画像だけが表示された新しいページが表示されます。
私の部分ビューのマークアップは次のようなものです。
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="HistoricalChartDialog">
<div id="ChartConfigurators">
<label for="ReportSelector">Historical Chart: </label>
<select id="ReportSelector" name="ReportSelector"></select>
<div id="ToggleLegendWrapper">
<label for="ToggleLegend">Toggle Legend</label>
<input type="checkbox" id="ToggleLegend" name="ToggleLegend" />
</div>
</div>
<img id="HistoricalChart" src="" alt="" usemap="#HistoricalChartMap" />
</div>
この部分図の中央にある img タグに注目してください。ユーザーが HistoricalDrillDown への URL をたどった後、img の SRC 属性を更新したいと考えています。
提案を受け付けます。:)
敬具。
解決
私はこれを行うことにしました:
foreach (Series series in lineChart.Series)
{
series.Url = string.Format("javascript: DrillChart('{0}')", series.PostBackValue);
}
次に、イメージを置き換えるためのロジックをクライアント側で処理しました。
所属していません StackOverflow