C# .net의 차트 구성 요소에서 alt 스타일을 제거하는 방법?

Question

컨트롤을 디자인 화면으로 끌어서 만든 C# .net webform에 스택 차트 구성 요소 (MS Chart Control Library의)가 있습니다. 그런 다음 원본 HTML (.aspx 페이지)을 편집하여 요소에 CSS 클래스를 제공하고 원래 있던 스타일 특성을 제거합니다. 이것은 임베디드 스타일을 사용하는 대신 CSS 파일에서 스타일을 제어 할 수 있도록하기위한 것입니다. 나는 다음과 같은 지정한는 site.css 파일에서

<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart" 
      IsMapAreaAttributesEncoded="True"> 

: 다음은 HTML입니다

.smallBarChart 
{ 
    width: 350px; 
    height: 230px; 
} 

나는 웹 앱 차트 구성 요소가 렌더링 된 HTML을 실행하면 "alt style"속성이 추가되었습니다. 올바른 class 속성을 가지고 있더라도 "style"속성에 포함 된 정보를 사용하고 있습니다. 이 "스타일"속성이 .net에 의해 생성되는 이유는 무엇입니까? 원본 aspx 파일에서 모든 스타일 속성 정보를 가져 왔습니다. 나는 뒤에 내 코드에 스타일을 변경할 수있는 지침이없는 (.cs)는 파일

<img id="Chart1" class="smallBarChart" src="/Charts/ChartImg.axd?i=chart_2c39400223fb4933bf5a99e05d6119d4_3.png&amp;g=b5c73578558442d3b9e1dd54cc127f20" alt="" style="height:300px;width:300px;border-width:0px;"> 

내가 내 site.css 파일에서 그래서 어떤 차트 구성 요소의 스타일을 제어 할 필요가 있음을 강조해야한다 인라인 스타일 사용에 대한 제안은 나를위한 선택 사항이 아닙니다. 인라인 스타일 (HTML 요소에 스타일 속성을 추가)은 어떤 경우에도 나쁜 습관입니다 !!!

Answer 1

나는 ASP.NET이 작업을 무시하는 이유를 알고 있지만, 당신의 CSS에서 시도하지 않습니다

.smallBarChart 
{ 
    width: 350px !important; 
    height: 230px !important; 
} 

행운을! 디자인 타임에

Answer 2

설정 차트의 크기 (너비/높이) :

<asp:Chart Height="Unit" Width="Unit" ID="Chart1" runat="server" DataSourceID="SqlDataSource1" CssClass="smallBarChart" IsMapAreaAttributesEncoded="True"> 

Answer 3

임 시작이에 대한 대답이 생각하는 그 .NET 런타임 런타임에 차트를 구축하는 데 필요한 HTML을 생성하기 때문에하고 브라우저에서이를 이해할 수 있도록 "Chart1"을 요소에서 요소로 변환하기 때문에 런타임에 자체 스타일 속성을 삽입합니다. (.aspx 파일에서이 속성을 제거하더라도 속성 창이 300px x 300px로 표시됨)).

일치하는 CSS 규칙은 HTML이 제공 될 때 요소를 제공하는 인라인 스타일로 덮어 쓰기 때문에 컨트롤에 cssClass를 할당하는 것은 의미가 없습니다 (항상 300x300px asp.net은 항상 런타임에 그것을 자신의 스타일 속성을 제공하기 때문에 어떤 이유로 내 경우. 즉

, 내가 별도의 CSS 파일에 asp.net 컨트롤의 폭과 높이를 지정할 수 없습니다.

내가이 질문을 게시 한 이유는 웹 사이트의 CSS 파일에서 "작은 막 대형 차트"라고 부르는 크기를 정의하여 페이지에 10, 15 또는 20 개의 작은 barchart가있는 경우, 나는 크기를 조정할 수있어. 모두 헴. NET에서 이렇게 할 수있는 방법은 CSS 파일에서 스타일을 제어 할 수 없기 때문에 올바른 크기의 사용자 지정 컨트롤을 만드는 것입니다.

Answer 4

.net 차트 컨트롤과 Zurb Foundation을 사용하여 비슷한 문제가 발생했으며 이미지를 반응 형 레이아웃으로 확대해야합니다. Zurb은 훌륭한 일을하지만 실제로 이미지에 설정된 너비 또는 높이가 필요하지 않습니다.

불행히도 width와 height는 style 속성을 통해 이미지 태그에 설정됩니다. 스케일링은 차트의 너비에서만 수행되었지만 높이는 동일하게 유지되었습니다.비례 배율을 적용하지 않으면 차트가 조금 엉망이 될 수 있습니다.

우리의 솔루션은 차트 컨트롤을 서브 클래스 화하고, render 메서드를 재정의하고, html을 렌더링하는 기본 클래스를 얻은 다음 html을 수정하여 스타일을 제거하는 것입니다. 이렇게하면 차트가 컨테이너에 비례하여 확장 될 수있었습니다.

는 여기에 우리의 솔루션입니다 : 차트가 C# 코드에서 문법 생성되는 우리의 경우

public class ChartWithNoDimensionsSpecified : Chart 
{ 

    //we override this because the child chart controls may throw an exception and we don't want that to take down our whole page! 
    protected override void Render(System.Web.UI.HtmlTextWriter writer) 
    { 
     try 
     { 
      //get the base control to render itself into our stringwriter 
      System.IO.StringWriter stringWriter = new System.IO.StringWriter(); 
      System.Web.UI.HtmlTextWriter chartWriter = new System.Web.UI.HtmlTextWriter(stringWriter); 
      base.Render(chartWriter); 

      //get the html rendered and find the start and end of the style tag 
      //note we assume no spaces between the style attribute = and " 
      //we also assume the img tag is first and there are no tags before it with a style 
      string html = stringWriter.ToString(); 
      int pos = html.IndexOf("style=\"",StringComparison.OrdinalIgnoreCase); 
      if (pos != -1) 
      { 
       int pos2 = html.IndexOf("\"", pos + 8); 

       //we only want this one style to be set in the tag itself. 
       string replaceStyleAttr = "border:0px;"; 

       //write the image tag, excluding the existing styles but replaced with our own... 
       writer.Write(html.Substring(0, pos + 7) + replaceStyleAttr + html.Substring(pos2)); 
      } 
      else //incase we could not find the style tag... 
      { 
       //write out the existing standard html. We could alternatively throw an error here. 
       writer.Write(html); 
      } 
     } 
     catch (Exception ex) 
     { 
      //if there is an error, write this output instead 
      writer.Write("<div title=\"The chart control could not be rendered. This may be related to configuration, permissions or IIS being confused about access to the temp chart images folder (exception: " + HttpUtility.HtmlAttributeEncode(ex.Message) + "). If the charts have otherwise worked ok, recycle the IIS app pool and stop/start the site\"><span style=\"color:#ff0000;\">Error</span> (hover for detail)</div>"); 
     } 
    } 
} 

, 그래서 우리는 asp.net 디자이너를 사용하지 마십시오. 그렇다면 디자이너에서 사용하기 위해이 부분을 약간 변경해야 할 수도 있습니다.