flashCase: Een taartdiagram

vinTagesworld flashCase

Maak zelf een flashCase item aan.

Een taartdiagram

_{door Gustaaf op 17-09-2007 om 14:40:47}

Ben zelf al een tijdje opzoek was naar een functie om stukken bogen en sectoren van een cirkel te tekenen via AS, het enige wat ik merkte is dat iedereen deze functie aan het zoeken was .. , met veel blabla en verwijzingen ... maar zonder resultaat. Toen ik las dat Vin ook een taartdiagram zocht....dacht ik "tijd om eens iets terug te doen".

Gewoon omdat de meest "extreme" vragen hier op een professionele manier behandeld worden. Vooral zijn vermogen om onbegrijpelijke vragen te ontcijferen en te voorzien van een nuttig antwoord grenst aan het onwaarschijnlijke. Hij leerde me AS'en. Dus de motivatie was er .. nu nog de taart.

De kernfunctie ="Drawsector" de rest is verpakking.
Voor een zuivere functie +uitleg verwijs ik naar het forum "Een taart voor iedereen".

actionscript code

var root:MovieClip = this;

var akleur:Array = Array();

var aantal = 0;

akleur[0] = "0xFFFFFF";

akleur[1] = "0xD4D4CC";

akleur[2] = "0x0000FF";

akleur[3] = "0xFFCC00";

akleur[4] = "0x00FF00";

akleur[5] = "0xFFFF00";

akleur[6] = "0xFFFFFF";

akleur[7] = "0xCCCCCC";

taartdiagram("200,160,45,108,80", "Omzet 2010,Omzet 2009,Omzet 2008,Omzet 2007,Omzet 2006");

// resultaten van de verschillende items in een string

var isinterval = setInterval(doe, 300);

intervalteller = 0;

function doe() {

  root["sector"+String(intervalteller)]._x -= 4000;

  root[(220+intervalteller)+"zin"]._x -= 4000;

  if (intervalteller == 0) {

    root["sector"+String(intervalteller)]._x+=6;

    root[(220+intervalteller)+"zin"]._x += 6;

    root["sector"+String(intervalteller)]._y+=6;

    root[(220+intervalteller)+"zin"]._y += 6;

  }

  intervalteller++;

  if (intervalteller>aantal) {

    clearInterval(isinterval);

  }

}

//////////////////////////////////////

function taartdiagram(string, string2) {

  var aresul:Array = string.split(",");

  var azin:Array = string2.split(",");

  var na = 0;

  var som = 0;

  aantal = aresul.length;

  while (na<aantal) {

    aresul[na] = Number(aresul[na]);

    som += aresul[na];

    na++;

  }

  var gem = som/360;

  som = 1;

  var nb = 0;

  while (nb<aantal) {

    is = Math.round(aresul[nb]/gem, 0);

    drawSector("sector"+nb, 20+nb, 350, 250, 200, som, is, akleur[nb], azin[nb]);

    som += is;

    nb++;

  }

}

//////////////////////////////////////////////////

function drawSector(parnaam, stuknr:Number, x:Number, y:Number, r:Number, s:Number, e:Number, k:Number, t:String):Void {

  naam = parnaam;

  root.createEmptyMovieClip(naam, stuknr);

  root[naam].lineStyle(2, 0x000000, 100);

  root[naam].beginFill(k, 100);

  helft = Math.round(s+e/2);

  na = 0;

  isstart = 0;

  teller = 0;

  while (na<360) {

    rad = (na*1*Math.PI)/180;

    startx = xcor;

    starty = ycor;

    xcor = x+r*(Math.cos(rad));

    ycor = y+r*(Math.sin(rad));

    bisx = 1+(startx+xcor)/2;

    bisy = 1+(starty+ycor)/2;

    if (na == helft) {

      helftx = -40+x+Math.round((r-60)*(Math.cos(rad)));

      helfty = y+Math.round((r-60)*(Math.sin(rad)));

    }

    if (na == s) {

      isstart = 1;

      root[naam].moveTo(x, y);

      root[naam].lineTo(xcor, ycor);

    }

    if (isstart == 1) {

      teller++;

      root[naam].curveTo(bisx, bisy, xcor, ycor);

      if (teller>e) {

        isstart = 0;

        na = 1000;

      }

    }

    na++;

  }

  root[naam]._x = 4000;

  root[naam].onRollOver = function() {

    detekst(300+stuknr, "zin", 50, 5, 250, 50, t, 30, akleur[0], "Arial", "c");

  };

  root[naam].onRollOut = function() {

    detekst(300+stuknr);

  };

  detekst(200+stuknr, "zin", helftx, helfty, 70, 50, Math.round(e*100/360)+"%", 22, "0x000000", "Arial", "c");

  root[(200+stuknr)+"zin"]._x += 4000;

}

///////////////////////////////////////////////////////////////////////////////////////////

function detekst(stuknr, parnaam, xstartPunt, ystartPunt, breedte, hoogte, partekst, lettersize, letterkleur, letterfont, lettermodex) {

  naam = String(stuknr)+parnaam;

  root.createTextField(naam, stuknr, xstartPunt, ystartPunt, breedte, hoogte);

  var my_fmt:TextFormat = new TextFormat();

  my_fmt.size = lettersize;

  my_fmt.font = letterfont;

  my_fmt.color = letterkleur;

  if (lettermodex == "c") {

    my_fmt.align = "center";

  }

  if (lettermodex == "r") {

    my_fmt.align = "right";

  }

  my_fmt.underline = false;

  root[naam].text = partekst;

  root[naam].selectable = false;

  root[naam].setTextFormat(my_fmt);

}

///////////////////////////////////////////////////////////////////////////////////////////////////

_{door vinTage op 17-09-2007 om 22:46:25}

Hey Gustaaf, hartstikke bedankt nog voor je antwoord op mijn vraag

Allereerst enorm top dat je zoiets gewoon uit je mouw kan schudden!

Over deze variant die je hier laat zien heb ik wel een paar kleine opmerkingen.

met deze code:
taartdiagram("200,160,45,108,80", "Omzet 2010,Omzet 2009,Omzet 2008,Omzet 2007,Omzet 2006"); word er een (mooie) taart diagram getoond, maar als ik de waardes optel die in procenten word getoond, dan kom ik op 101 uit, als ik gewoon wat getalletjes invult is het wel goed, maar bij deze toevallig niet.

een andere variant die ietwat raar doet:
taartdiagram("16,160,80");

Verder zie ik in deze code ook dat er ergens een onRollOver zou moeten gebeuren maar die zie ik niet ?

Nu heb ik mezelf dan de opdracht gegeven om jouw drawsector te snappen (geloof me vrij, dit is echt ownage moeilijk voor me

)

In ieder geval, als ik je orginele drawsector een punt zou moeten geven, dan zou dat in ieder geval een héél mooi punt zijn.

Nogmaals bedankt.

_{door Gustaaf op 18-09-2007 om 9:13:13}

Dank voor je reactie.
101% is misschien wat veel ... heeft alles te maken met afrondingen.(functie round())
Tis de basis dat telt zou ik zeggen.
Normaal zou je met een rollover de omzet gegevens moeten zien in de linkerbovenhoek , mogelijk zie je die niet omdat je achtergrond wit is en de letters dat ook zijn.
Als je dit echt een probleem vindt doe ik er iets aan hoor.

Kan jij eventueel een link zetten naar jouw url. Voor mij ligt dat deontologisch nogal moeilijk.

_{door vinTage op 18-09-2007 om 19:50:17}

Ah inderdaad, die witte achtergrond maakte de text onzichtbaar, ik heb een voorbeeld geupload

_{door Gustaaf op 18-09-2007 om 19:57:48}

Dank Vin,

Hoewel met zwart dan weer de contoeren van de taart wegvallen.

Wat dacht je van grijs?

_{door vinTage op 18-09-2007 om 21:21:28}

Sorry, niet aan gedacht

_{door Gustaaf op 19-09-2007 om 14:20:04}

Schitterend ... nu nog 700 x 500 pixels en je krijgt de bovenste inforegel altijd te zien.

_{door W0utah op 26-09-2007 om 0:31:57}

ik moet zeggen, echt mooi gemaakt.
Als je zin/tijd hebt kan je miss iets maken als je op een stukje klikt dat dat stukje naar buiten komt zodat je het goed kan zien.

_{door thomasje op 07-01-2009 om 21:11:04}

Hey echt een zeer mooi en plrachtig werkje (nou ja werkje, volgens mij ben je er wel even mee bezig geweest) Maar zou je mischien ook eens iets meer infor kunnen doorsturen of hier posten hoe je nu de aantal % op de goede plaats zet, ik heb hier ook een topic voor geopend maar ik ben met een veiling site bezig en ben zelf nu aan het stoeien om bedragen uit te rekenen en die in rond de veiling klok neer te zetten, volgens mij zou dat met zoiets ook kunnen.
Ik hoop dat je me iets verder kan helpen al is het maar iets meer info hoe dit scriptje presies werkt en dan met name de % overal neer zetten.

Verder echt een pluim voor het script

Je moet aangemeld zijn om te kunnen reageren.