c＃.netのグラフコンポーネントからaltスタイルを削除するには？

Question

私は、コントロールサーフェス上にコントロールをドラッグして作成したc＃.net webformにスタックチャートコンポーネント（MS Chart Control Libraryから）を持っています。私はソースHTML（.aspxページ）を編集して要素にCSSクラスを与え、もともと存在していたスタイル属性を削除しました。これは、埋め込みスタイルを使用する代わりにCSSファイルからスタイルを制御できるようにするためです。ここではHTMLは次のとおりです。

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

site.cssファイルでは、私は次のように指定している：

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

私は、Webアプリを実行すると、チャートコンポーネントのためにレンダリングされるHTMLは持ち"alt style"属性が追加されました。正しいclass属性を持っていても、 "style"属性に含まれる情報を使用しています。この "スタイル"属性が.netによって生成されるのはなぜですか？私は元のaspxファイルからすべてのスタイル属性情報を取り出しました。 は私が

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

ファイルの後ろに私のコード（.csファイル）でスタイルを変更するには、いずれかの指示を持っていない私は、どのように私は私の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が表示されます） ）。

この場合、コントロールにcssClassを割り当てるのは意味がないようです。一致するCSSルールは、HTMLが提供されたときに要素を与えるインラインスタイルによってオーバーライドされます（常に300 x 300px asp.netは常に実行時にそれを独自のスタイル属性を与えるため、何らかの理由で私の場合。つまり

は、私は別のCSSファイルでasp.netのコントロールの幅と高さを指定することはできません。

私がこの質問を投稿した理由は、WebサイトのCSSファイルで「小さな棒グラフ」と呼ばれるもののサイズを定義して、ページにこれらの小さなbarchartを10,15、私はサイズを変更することができますすべての裾。私はネットでこれを行う方法は、CSSファイルからそのスタイルを制御することはできませんので、適切なサイズのカスタムコントロールを作成することだと思います。

Answer 4

.net chart controlとZurb Foundationを使用して同様の問題が発生しました。私たちのイメージはレスポンシブなレイアウトで拡大します。 Zurbは素晴らしい仕事をしていますが、実際には画像に幅や高さを設定する必要はありません。

残念ながら、幅と高さはスタイルタグを使ってイメージタグに設定されています。スケーリングはチャートの幅でのみ実行されたが、高さは同じままであることがわかった。比例的なスケーリングがなければ、私たちのチャートはちょっと潰れて見えます。

私たちの解決策は、チャートコントロールをサブクラス化し、レンダリングメソッドをオーバーライドし、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デザイナーを使用しないでください。そうした場合、デザイナーでこれを使用するには、これをいくつか変更する必要があります。