Opprette diagrammer ved hjelp av JavaScript og PHP

Nettbasert diagram kan opprettes ved å bruke et hvilket som helst bibliotek på klientsiden eller biblioteket på serversiden basert på statiske eller dynamiske data. Hvis du vil lage animerte diagrammer og vil laste ned diagrammet raskere, er det bedre å bruke et klientsiden-kartbibliotek. Mange biblioteker på klientsiden er tilgjengelige for å lage diagrammer for websider. Et av de populære bibliotekene på klientsiden er Lerret som kan brukes til å lage nettbaserte diagrammer ved å bruke faste data eller hente data fra hvilken som helst database.

Canvasjs brukes med PHP i denne opplæringen for å lage nettbaserte diagrammer. Dette biblioteket støtter forskjellige typer diagrammer, for eksempel søylediagram, kolonnediagram, dynamisk kolonnediagram, linjekart, kakediagram, pyramiddiagram, smultringskart, boblediagram osv. Noen av dem vises her ved å bruke eksempler på data. Før du starter denne opplæringen, må du sørge for at webserveren din og PHP er installert riktig og fungerer.

Last ned Canvasjs

Den er tilgjengelig i gratis og kommersiell versjon. Du kan laste ned og bruke gratisversjonen av dette biblioteket til testformål. Gå til følgende URL og klikk på nedlasting lenke for å laste ned lerretjs bibliotek. Pakk ut filen og lagre mappen i webserver etter nedlasting for å bruke den.

https: // lerret.com

$ ProfitData = Array (
Array ("X" => 2013, "Y" => 440000),
Array ("X" => 2014, "Y" => 270000),
Array ("X" => 2015, "Y" => 210000, "IndexLabel" => "Laveste"),
Array ("X" => 2016, "Y" => 600000),
Array ("X" => 2017, "Y" => 630000, "IndexLabel" => "Highest"),
Array ("x" => 2018, "y" => 560000));
?>

Eksempel på kolonne

Produksjon:

Følgende utdata vil bli generert hvis du kjører filen fra en webserver. “Prøveversjon” og “Canvasjs.com ”vannmerker vises for gratis versjon.

Når du klikker på "Flere valg" Knapp fra øverste høyre hjørne, da vises tre alternativer. Du kan skrive ut diagrammet eller lagre diagrammet som JPG- eller PNG -bildeformat. Hvis du klikker på "Spar som PNG”Alternativ så vises følgende dialogboks.

Standard bildefilnavn er Diagram.png. Du kan fjerne vannmerkene fra bildet ved å bruke hvilken som helst programvare for fotoredigering.

Kake diagram:

Følgende eksempel viser populariteten til forskjellige Linux -distribusjoner ved hjelp av kakediagram. Skriv følgende kode i en fil som heter Kake diagram.PHP og lagre filen i vAR/www/html/jschart mappe.

$ popularitet = matrise (
Array ("OS" => "Arch Linux", "Y" => 40),
Array ("OS" => "Centos", "Y" => 25),
Array ("OS" => "Debian", "y" => 12),
Array ("OS" => "Fedora", "y" => 10),
Array ("OS" => "Gentoo", "Y" => 8),
Array ("OS" => "Lindows", "Y" => 5)
);
?>

Eksempel på kakediagram

Produksjon:

Følgende utdata vises hvis du kjører filen fra webserveren. Du kan opprette bildefil av diagrammet etter trinnet som vises i forrige eksempel.

Dynamisk kolonnediagram:

Du kan opprette pent dynamisk diagram ved å bruke dette biblioteket. Anta at du vil lage live -markedsdiagram der aksjekurs øker eller reduseres kontinuerlig. Skriv følgende kode i en fil som heter Dynamisk-kart.PHP og lagre filen i vAR/www/html/jschart mappe.

$ StockData = Array (
Array ("Stock" => "MSFT", "Y" => 92.67),
Array ("Stock" => "Low", "Y" => 88.89),
Array ("Stock" => "INTC", "Y" => 52.15),
Array ("Stock" => "Adi", "Y" => 91.78),
Array ("Stock" => "ADBE", "Y" => 224.80),
Array ("Stock" => "ABBV", "Y" => 94.30),
Array ("Stock" => "AMD", "Y" => 10.27)
);
?>

Dynamisk diagrameksempel

Produksjon:
Følgende utdata vises hvis du kjører filen fra webserveren. Du kan opprette bildefil av diagrammet på samme måte som vises i det første eksemplet.

Ved å følge trinnene ovenfor, kan du enkelt lage nødvendige nettbaserte animerte diagrammer ved hjelp av dette nyttige JavaScript -biblioteket.