Question

是否有任何示例可以在ASP.NET MVC 3 Razor引擎中的Chart Web Helper生成的图表上显示工具提示？当用户点击父图表的任何一点时，我必须创建并显示子图表。请让我知道如何做到这一点。

Answer 1

现在，没有办法做到这一点。

Answer 2

我不完全确定你在问什么，但我对它的看法是......

这将显示带有图表的页面。单击图表时，它将打开一个新图表。非常基本，但也许足以玩。

将它放在你的控制器中：

    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;
    }

这是您的观点：

<!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>

Answer 3

Chart中还有一个System.Web.UI.DataVisualization.Charting.Chart类。它使用相同的渲染器，但使您可以更轻松地从代码创建图表。该Chart具有内置功能GetHtmlImageMap，您可以使用该功能显示每个数据点的工具提示。视图模型将同时具有图像映射和图像。

很遗憾，@Html.ImageFromByte不允许您指定图像映射，但是您可以解决此问题。将图形图像转换为base64，并使用原始html进行显示。

控制器：

            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)

如何使用ASP.NET MVC 3 Chart Web Helper显示工具提示

3 个答案: