동일한 페이지의 여러 MS 차트가 동일한 이미지 맵을 사용합니다.

Question

Microsoft 차트 컨트롤을 사용하여 웹 페이지에 몇 개의 차트를 넣었습니다. 모두 차트에 대한 이미지 맵에 같은 이름을 사용하는 것이

가

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

참고 :이 개 차트를 렌더링하면 결과 HTML은 다음과 같이 (테이블, 내 인 IMG와지도가 MS 차트에서이다)이다 각 차트 - "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의 영문 페이지로 작업하는 경우 귀하의 코드는 아마 다를 것이다, 그러나 나는 이것이 당신에게 출발을하기에 충분 희망 . 중요한 점은 컨트롤 ID가 동일한 페이지의 다른 차트 컨트롤에 따라 다르다는 것입니다 (그러므로 Guids를 다소 잔인하게 사용하는 것).

대체 제어 ID 생성 전략을 보려면 http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx을보십시오 - 위의 예가 유일한 방법은 아닙니다.