ASP.NET: Generate Pie Charts over GET params from URL / Tortendiagramme über URL Get Request generieren

Problem

Es sollen Tortendiagramme in ASP.NET angezeigt werden.

Ansatz

Runterladen von

Die Diagramme können über einen Request-Parameter erstellt werden:

http://localhost:51241/PieChartGetParams.aspx?headline=Ich mag Bier&pieces=ein;20;komisches;50;Tortendiagramm;40

  • Headline: Ist die Überschrift des Tortendiagramms
  • Pieces: Abwechselnd durch Semikolon getrennt immer Tortenstück1;Wert1;Tortenstück2;Wert2;…;TortenstückN;WertN

Lösung – Solution

Laden Sie HighCharts runter und passen Sie untenstehenden Quellcode an:

<script src="pfad/zu/highcharts.js"></script>
<script src="charts/zu/exporting.js"></script>
<script type="text/javascript" src="Pfad/zu/jquery-1.4.1.min.js"></script>

Erstellen Sie eine ASP.NET-Seite mit folgendem Inhalt:

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="PieChartGetParams.aspx.cs" Inherits="PieChart" %&gt;
 
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script><script src="charts/highcharts.js"></script><script type="text/javascript">
  $(function () {
    function drawPieChart(seriesData) {
       $('#container').highcharts({
	 chart: {
	   plotBackgroundColor: null,
           plotBorderWidth: null,
           plotShadow: false,
           type: 'pie'
	 },
	title: {
          text: '<%=Request.Params["headline"] %>'
	},
	tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
           pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.y} ',
              style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
           }
        }
     },
     series: [{
       name: "Percentage",
       colorByPoint: true,
       data: seriesData
     }]
  });
 }

 function addToPieChart(arr, key, value)
 {
    var obj = {};
    obj.name = key;
    obj.y = value;
    arr.push(obj);
 }

 var arr = []

 <% if (Request.Params["pieces"] != null) { string piecesParam = Request.Params["pieces"]; char[] splitchar = { ';'}; int i = 0; string label = ""; foreach(string s in piecesParam.Split(splitchar)) { if(i%2==0) { label = s; } else { Response.Write("addToPieChart(arr, '" + label + "', " + s + ");"); } i++; } } %>

  var myJsonString = JSON.stringify(arr);
  var jsonArray = JSON.parse(JSON.stringify(arr));

  drawPieChart(jsonArray);
});
</script>
    
    <script src="charts/modules/exporting.js"></script>
 

 

 

 

 

Dieser Beitrag wurde unter .NET, C#, Microsoft IIS Server veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.