How to show tooltip using ASP.NET MVC 3 Chart Web Helper
Is there any sample to show tooltip on chart generated by Chart Web Helper in ASP.NET MVC 3 Razor engine? I have to create开发者_Go百科 and show child chart when user clicks on any point of parent chart. Please let me know how i can do this.
Right Now, There is no way to do this.
I'm not entirely sure what you are asking but my take on it is this...
This will show a page with a chart. When you click on the chart, it will open a new chart. Very basic but maybe enough to play around with.
Put this in your controller:
public ActionResult GetRainfallChart()
{
var key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "bar",
legend: "Chart",
xValue: new[] { "Mon", "Tue", "Wed", "Thu", "Fri" },
yValues: new[] { "23", "12", "13", "42", "22" })
.Write();
return null;
}
public ActionResult GetRainfallChart2()
{
var key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "pie",
legend: "Another chart",
xValue: new[] { "Mon", "Tue", "Wed", "Thu", "Fri" },
yValues: new[] { "23", "12", "13", "42", "22" })
.Write();
return null;
}
and this for your view:
<!DOCTYPE html>
<html>
<head>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false
});
$("#chart").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
</head>
<body>
<img id="chart" src="/Home/GetRainfallChart" alt="Chart tooltip" />
<div id="dialog">
<img src="/Home/GetRainfallChart2" />
</div>
</body>
</html>
There is another Chart class in System.Web.UI.DataVisualization.Charting.Chart. It uses the same renderer, but lets you create charts from code more easily. This Chart has the built in function GetHtmlImageMap, which you can use to display tooltips for each of the data points. The view model would have both the image map and the image.
Unfortunately the @Html.ImageFromByte doesn't allow you to specify an image map, but you can work around this. Convert the graph image to base64 display it using raw html.
controller:
System.Web.UI.DataVisualization.Charting.Chart chart = // create your chart
var stream = new MemoryStream();
chart.SaveImage(stream, ChartImageFormat.Png);
var vm = new YourViewModel
{
ChartBase64 = Convert.ToBase64String(stream.GetBuffer()),
ChartHtmlMap = chart.GetHtmlImageMap("map")
};
viewmodel:
public string ChartBase64 { get; set; }
public string ChartHtmlMap { get; set; }
cshtml:
@Html.Raw("<img src=data:image/jpg;base64," + Model.ChartBase64 + " usemap=\"#map\">")
@Html.Raw(Model.ChartHtmlMap)
加载中,请稍侯......
精彩评论