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” - 它使用后续图表中第一个图表的坐标，即使它在每个元素上放置不同的标题。

我是否在尝试在1页上呈现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对于同一页面上的不同图表控件是不同的（因此我相当残酷地使用Guids）。

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

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

1 个答案: