Problem

Es sollen Tortendiagramme in ASP.NET angezeigt werden.

Ansatz

Runterladen von

• JQuery
• HighChart

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PieChartGetParams.aspx.cs" Inherits="PieChart" %>
 
 <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&#91;"headline"&#93; %>'
	},
	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&#91;"pieces"&#93; != null) { string piecesParam = Request.Params&#91;"pieces"&#93;; char&#91;&#93; 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>