Hvordan Tegn et sektordiagram ved hjelp av Javascript

Hvordan Tegn et sektordiagram ved hjelp av Javascript


Javascript er i stand til å legge mange avanserte funksjoner til nettsider, blant annet sektordiagrammer og grafer. Det er mange høyt nivå Javascript-biblioteker tilgjengelig for å hjelpe en programmerer enkelt legge til disse funksjonene. Dataene kan programmeres inn på websiden i fast skjema dynamisk lagt til side under kjøring fra enhver kilde; eller generert dynamisk i henhold til brukerundersøkelser.

Bruksanvisning

Legge til et kakediagram via Javascript

1 Last ned JS Charts biblioteket. JS Charts er en lett-å-bruke pakke for å legge til diagrammer og grafer til websider, inkludert sektordiagrammer.

2 Last JS Charts inn på din side. Dette gjøres ved å legge til en HTML-kode som "<script type =" text / javascript "/>" til nettsidens header. Sørg for å endre banen for å matche uansett hvor du setter jscharts.js filen.

3 Lag en <div> for å holde kakediagram. Dette kan være plassert hvor som helst på siden du vil. Sørg for å gi <div> en id, slik at du kan referere til den i kakediagrammet, for eksempel "<div id =" piechart "> </ div> '

4 Legg Javascript for å gjøre JS Charts opprette diagrammet. Koden vil se omtrent slik ut:

<Script type = "text / javascript">

var pieChart = new JSChart('piechart', 'pie');
pieChart.setDataArray(new Array(["First area", 20], ["Second area", 40], ["Third area", 40]);
pieChart.draw();

</ Script>

Hint

  • Dette vil skape en grunnleggende kakediagram. JS Charts har mange flere alternativer tilgjengelige for formatering og styling diagrammer. Ta kontakt med JS Charts manual for alle detaljer om de mange tilpasningene som er tilgjengelige. Det er andre pie chart biblioteker tilgjengelig hvis JS Charts er ikke helt hva du hadde i tankene.