Wie Asp.NET-Diagramm (mit gleichmäßiger Handhabung) Größe responsive

Question

machen Ich benutze asp.net Diagrammsteuerung zu erstellen Balkendiagramm. Meine Aspx-Seite erlaubt mir nicht, die Breite in Prozent zu setzen (wenn sie in Prozent gesetzt ist, gibt es einen Fehler zur Laufzeit, der besagt, dass sie nur in Pixeln gesetzt werden kann).

Ich handle Click-Ereignis auf meinem Diagramm (verschiedene Balken sind anklickbar/Hyperlink - Klicken auf, die sendet X-und Y-Wert zu einer Methode in Code hinter).

Jetzt habe ich versucht, die Breite des Diagramms in meinem CSS auf 100%, dann was passiert, ist diese Größe des Diagramms ändert, aber die Position der Hyperlinks bleibt gleich und es wird eine Diskrepanz zwischen den Balken Hyperlinks und tatsächlichen sichtbaren Position von bar. (Der Grund dafür ist meiner Meinung nach - Asp-Diagramm ist nichts anderes als ein Bild für einen Browser - da schließlich generierter HTML-Code eine Stelle enthält und Hyperlinks in diesem Diagramm mit den Koordinaten definiert sind, um die verschiedenen Bereiche in den Graphen verlinkt zu halten). Also mit CSS, ändert sich die Größe des Bildes, aber die Hyperlinks bleiben gleich.

Warum ich die Größe meines Asp-Diagramms behalten möchte, ist, weil ich die Größe des Bildes auf verschiedene Bildschirmgrößen reagieren lassen möchte. Bitte sag was ich tun soll? Hilfe wird geschätzt. Danke im Voraus.

Answer 1

Ich weiß nicht, ob dies hilfreich sein kann, ich habe ein einfaches Javascript verwendet, um die Grafiken auf der Größe der Seitengröße zu skalieren; das Skript überprüft, ob die Fenstergröße von mehr als 1024px ist, ein Update verwenden, hier documentation

<script type="text/javascript" language="javascript"> 
     function load() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     } 

     function EndRequestHandler() { 
      $(document).ready(function() { 
       scale(); 

      }); 
      $(window).resize(function() { 
       scale(); 
      }); 
      function scale() { 
       var wi = $(window).width(); 
       if (wi >= 1024) { 
        var w_wi = $("#ChartID").width(); 
        var w_he = $("#ChartID").height(); 
        var rpt = w_he/w_wi; 
        $("#ChartID").css("width", $(window).width()); 
        $("#ChartID").css("height", wi * rpt); 
       } else { 
        scaleDefault(); 
       } 
      } 
      function scaleDefault() { 

       var wi = $(window).width(); 
        var w_wi = $("#ChartID").width(); 
        var w_he = $("#ChartID").height(); 
        var rpt = w_he/w_wi; 
        $("#ChartID").css("width", 1024); 
        $("#ChartID").css("height", 1024 * rpt); 
      } 

     } 
     $(function() { 
      EndRequestHandler(); 
     }); 

    </script>