同一页面上的多个 MS Charts 使用相同的图像映射

Question

我正在使用 Microsoft Chart 控件在网页上放置几个图表。如果渲染 2 个图表，生成的 HTML 是这样的（表格是我的，img 和地图来自 MS 图表）：

<table id="chart">
    <tr>
        <td id="rolling">
            <img src="/ChartImg.axd?i=chart_45ec7063132a47d9bf08ce377f4d6030_0.png&amp;g=d82064ecb0cf459dbda23039ae0c3f70" alt="" usemap="#ImageMap" style="height:200px;width:250px;border-width:0px;" />
<map name="ImageMap" id="ImageMap">

    <area shape="rect" coords="190,112,242,132" title="$321.01" alt="" />
    <area shape="rect" coords="59,69,111,132" title="$1,017.92" alt="" />
    <area shape="rect" coords="138,104,190,132" title="$449.04" alt="" />
    <area shape="rect" coords="7,25,59,132" title="$1,714.59" alt="" />
</map>
        </td>
        <td id="highrisk">
            <img src="/ChartImg.axd?i=chart_45ec7063132a47d9bf08ce377f4d6030_1.png&amp;g=6f876c9016cd4b72b5ba60609b9d05ec" alt="" usemap="#ImageMap" style="height:200px;width:250px;border-width:0px;" />
<map name="ImageMap" id="ImageMap">

    <area shape="rect" coords="190,128,242,132" title="41" alt="" />
    <area shape="rect" coords="59,131,111,132" title="6" alt="" />
    <area shape="rect" coords="138,25,190,132" title="922" alt="" />
    <area shape="rect" coords="7,121,59,132" title="100" alt="" />
</map>
        </td>
    </tr>
</table>

请注意，两个图表对每个图表的图像映射使用相同的名称 - “ImageMap” - 并且它在后续图表中使用第一个图表的坐标，即使它在每个元素上放置了不同的标题。

我在尝试在一页上呈现 2 个图表时做错了吗？有解决办法吗？

Answer 1

我刚刚在同一页面上使用 ASP.Net 4、MVC 3、Razor 视图引擎和多个动态生成的图表控件（通过多个局部视图）遇到了完全相同的症状。

我得出的解决方案是明确设置不同图表控件的 Id 值，以确保它们不同。在我的情况下，相关的代码片段（来自视图内部）是

var chart = new System.Web.UI.DataVisualization.Charting.Chart();
chart.ClientIDMode = ClientIDMode.Static;
chart.ID = "Chart" + Guid.NewGuid().ToString("N");

如果您使用的是非 MVC aspx 页面，您的代码可能会有所不同，但我希望这足以让您开始。重要的是要确保同一页面上不同图表控件的控件 ID 不同（因此我对 Guid 的使用相当粗暴）。

查看http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx 了解替代控件 ID 生成策略 - 我上面的示例不是唯一的方法。