Krijimi i grafikëve duke përdorur Google Chart API.

Gjithmonë kam pyetur veten se si u shfaq një frazë e tillë si "një foto zëvendëson një mijë fjalë". Mund t'i atribuohet lehtësisht menaxherëve, pasi janë ata që, pasi shikojnë një listë të gjatë numrash, mund të gjejnë një grafik në fund të faqes që kombinon të gjithë numrat, duke demonstruar kështu frazën e dhënë. Grafikët dhe grafikët ofrojnë rishikim i shkurtër një numër i madh informacion. Me ndihmën e një diagrami, një person mund të vërejë shpejt çdo prirje, të krahasojë rezultate të ndryshme ose të vërejë një model.

Ka shumë mënyra për të krijuar grafikët në një faqe interneti ASP.NET. Ju mund të përdorni klasat në hapësirën e emrave System.Drawing për të krijuar diagrame në mënyrë programore... Ju gjithashtu mund të përdorni Microsoft Office Komponentët e Uebit (OWC). Ka edhe falas software në formën e mjeteve të vizatimit të diagramit, si dhe një bollëk të komponentët e palëve të treta. Microsoft gjithashtu hyri në lojë dhe siguroi Microsoft Chart Controls për. NET Framework 3.5 SP1 (Kontrollet e grafikut për .NET Framework 3.5 SP1).

Ky artikull shikon një mënyrë për të përdorur API-në e grafikut të Google për të krijuar grafikët. Google Chart API është shërbim falas nga Google, i cili lejon zhvilluesit e aplikacioneve në ueb të krijojnë imazhe diagrami në fluturim duke krijuar një element me një atribut src që tregon një lidhje URL që përfshin të dhëna grafiku, etiketa dhe informacione të tjera për vargun e pyetjes. Për shembull, grafiku i paraqitur në të djathtë është i disponueshëm në http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1|Q2|Q3|Q4&chtt= 2008 % 20Shitjet% 20Me% 20Tremujor. Lexoni për të mësuar se si të përdorni API-në e grafikut të Google në faqen tuaj të internetit ASP.NET!

Përmbledhje e API-së së grafikut të Google

Google Chart API i lejon zhvilluesit të krijojnë lloje të ndryshme grafikësh menjëherë. Google Chart API ruhet nga një lidhje me një burim (URL) në serverët e uebit të Google dhe kur merret një lidhje e formatuar siç duhet (URL), ajo e kthen grafikun si imazh. Karakteristikat e grafikut (ngjyrat, titujt, boshtet, pikat në grafik etj.) përcaktohen nëpërmjet një vargu të pyetjeve të lidhjes (URL). Imazhi që rezulton mund të shfaqet duke përdorur elementin , ose mund të ruhet në sistemi i skedarëve serverin tuaj të internetit ose në një bazë të dhënash. Aspekti më i këndshëm është se Google Chart API është falas dhe nuk kërkon asnjë llogari dhe kaloni procesin e regjistrimit!

Lidhja kryesore me Google Chart API është http://chart.apis.google.com/chart?... Parametrat që përcaktojnë shfaqjen e grafikut vijojnë pas simbolit? Ka shumë parametra që mund t'i specifikoni përmes vargut të pyetjes. Të vetmet parametrat e kërkuar janë madhësia e grafikut (chs), të dhënat e grafikut (chd) dhe lloji i grafikut (cht). Tabela e mëposhtme përshkruan disa nga parametrat e përdorur:

Vini re se pikat e grafikut të dërguara në parametrin chd nuk janë ato që duam të vizatojmë në komplot - 43, 23, 12, 62, 34 dhe 39. Në vend të kësaj, përqindjet u dërguan në vlerën më të madhe të këtyre pikave. Me fjalë të tjera, pika e grafikut x konvertohet në përqindje duke përdorur shprehjen ( x / maxDataPoint) * 100. Për shembull, vlera reale 43 bëhet 43/62 * 100 = 69.3.

Dhe do të merrni daljen e mëposhtme:

Duket mirë, apo jo? Ky diagramështë shumë e thjeshtë dhe na u deshën 1.5 sekonda për ta krijuar atë. Nëse kaloni më shumë kohë duke hulumtuar Aftësitë e Google API-ja e grafikut, më pas do të gjeni parametra që mund t'i përdorni për të specifikuar ngjyrat, për të shtuar boshte, etiketa dhe më shumë. karakteristikat standarde... Për shembull, ne mund të përfshijmë vlera numerike në boshtin Y për të treguar numrin e vizitave dhe vlerat e ditës në boshtin X thjesht duke përditësuar lidhjen për t'u përdorur rreshti tjetër kërkesa:? cht = lc & chs = 300x200 & chd = t: 69.3,37.1,19.4,100.0,54.8,62.9 & chds = 0,62 & chtt =% mujore 20Trafiku & chxt = x, y & chxl = 0: | 1 | 7 | 14 | 21 | 31 dhe chxr = 1.0.62

Kështu do të duket diagrami:

Gjenerimi i një grafiku Google për një faqe ASP.NET duke përdorur informacion nga një bazë të dhënash

Me më shumë punë, duhet të jeni në gjendje të krijoni një grafik bazuar në vlerat nga baza e të dhënave kur Ndihma e Google API-ja e grafikut. Thjesht duhet të krijojmë një varg pyetjesh të përshtatshme bazuar në të dhënat për të cilat duam ta krijojmë, llojin e grafikut dhe etiketat e boshteve X dhe Y (nëse ka). Më vonë në këtë artikull, ne do të ecim në ndërtimin e një vargu pyetjesh në një faqe ASP.NET për një pyetje të bazës së të dhënave që kthen shitjet sipas muajve për Tregtarët Northwind. Ju mund të shkarkoni kodin e punës në fund të artikullit.

Hapi i parë është krijimi i një pyetjeje që kthen të dhënat e kërkuara. Shembulli im përdor bazën e të dhënave Northwind, e cila ruan informacione për produktet, klientët, porositë, etj. Për ky shembull Vendosa të krijoj një tabelë të shitjeve bruto sipas muajve të një viti të caktuar. Kthehet pyetja e mëposhtme ky informacion për një vit të caktuar:

ZGJIDH MUAJIN (o.Data e porositjes) AS MuajVal, SHUMË (od.Çmimi Njësi * od.Sasia) AS Total
NGA Porositë AS o
BASHKIMI I BRENDSHËM SI ON ON
od.UrderID = o.UrderID
KU (VITI (o.Data e porosisë) = @Viti)
GRUPI PËR MUAJ (o.Data e porosisë)
POROSIT SIPAS MuajitVal

Baza e të dhënave Northwind ka shitje për 1996, 1997 dhe 1998. Nëse kaloni një nga këto vlera si parametër te @Year, do të merrni rezultatet e mëposhtme:

Shembulli specifikon pyetjen e referuar në një kontroll SqlDataSource dhe shfaq rezultatet në një faqe në një kontroll GridView. GridView është përshtatur për të shfaqur rezultatet për kolonën Total në formatin e monedhës, dhe gjithashtu ka formatuar kolonën MonthVal në mënyrë që çdo rresht të përmbajë vetëm tre shkronjat e para të çdo muaji. Ky formatim MonthVal është duke u përpunuar funksion ndihmës në kodin e sfondit, përkatësisht DisplayMonthName, i cili merr muajin si vlerë numerike(1, 2, ..., 12) dhe kthen një vlerë të formatuar ("Jan", "Shkurt", ..., "Dhjetor"). Shtova gjithashtu një kontroll DropDownList në faqe në mënyrë që përdoruesi të mund të specifikojë një vlerë për parametrin @Year - DropDownList është i koduar në 1996, 1997 dhe 1998.

Përveç kontrolleve SqlDataSource, GridView dhe DropDownList për vitin, faqja përfshin një kontroll Image për shfaqjen e grafikut. Vetia ImageUrl e elementit Image është caktuar në mënyrë programore në lidhjen përkatëse të URL-së në klasën e kodit të sfondit. Kjo trajtohet në metodën DisplayChart. Kjo metodë fillon duke krijuar trupin kryesor të lidhjes (url) - llojin e grafikut (cht), madhësinë e grafikut (chs) dhe titullin e grafikut. Lloji dhe madhësia e grafikut diktohen nga vlerat e zgjedhura nga përdoruesi duke përdorur kontrollet DropDownList.

Nëngrafikë e mbrojtur e ekranit ()
“Ndërtimi i një diagrami lidhjesh
Dim grafiku Url si StringBuilder i ri ("http://chart.apis.google.com/chart?")

"Shtimi i një lloji grafiku
chartUrl.AppendFormat ("cht = (0)", Server.UrlEncode (ddlChartType.SelectedValue))

"Shtimi i një madhësie grafiku
chartUrl.AppendFormat ("& chs = (0)", Server.UrlEncode (ddlChartSize.SelectedValue))

“Duke shtuar një titull
chartUrl.AppendFormat ("& chtt = (0)", Server.UrlEncode ("Sales for" & ddlYear.SelectedValue))

Më pas, thirret metoda Select e SqlDataSource. Këto rezultate janë numëruar dhe vlerat e tyre janë mbledhur në një listë me vlera dhjetore (dhjetore) (literalDataPointsList) dhe etiketat për secilën pikë të të dhënave, domethënë shkurtesat për çdo muaj, shkruhen në një listë vlerash vargu. (xAxisLabels). Pasi të jenë shkruar vlerat e pikës së grafikut, ato do të shprehen si përqindje e vlerës më të madhe dhe do të ruhen në një listë vlerash vargu të emërtuar relativeDataPointValues. Vlerat në këtë listë pastaj bashkohet (ndahet me presje) dhe caktohet në parametrin e të dhënave të grafikut (chd).

"Shtimi i pikave të të dhënave të grafikut. Së pari, ju duhet të merrni të dhënat nga kontrolli SqlDataSource
Dim dataPointsView As DataView = CType (dsChartData.Select (DataSourceSelectArguments.Empty), DataView)
Zbehni xAxisLabels si listë të re (të vargut)
Dim literalDataPointsList si listë e re (e dhjetore)
Dim maxValue si dhjetore = 0

"Leximi i pikave të të dhënave dhe ruajtja vlera maksimale
Për çdo pikë si DataRowView në dataPointsView
“Heqja e centëve nga çdo shumë
literalDataPointsList.Add (Convert.ToDecimal (pika ("Total")))

“Duke kontrolluar për një maksimum të ri
Nëse literalDataPointsList (literalDataPointsList.Count - 1)> maxValue Pastaj
maxValue = literalDataPointsList (literalDataPointsList.Count - 1)
Fundi Nëse

Nëse ddlChartSize.SelectedIndex<>0 OrElse literalDataPointsList.Count Mod 2 = 1 Pastaj
xAxisLabels.Add (DisplayMonthName (Convert.ToInt32 (pika ("MonthVal"))))
Përndryshe
xAxisLabels.Add (String.Empty)
Fundi Nëse
Tjetra

"Llogaritja e vlerave relative të pikave të të dhënave
Zbeh relativeDataPointValues ​​si listë e re (Of String)
Për çdo pikë si dhjetore në literalDataPointsList
Vlera e zbehtë relative si dhjetore = (pika / maxVlera * 100)
relativeDataPointValues.Add (relativeValue.ToString ("0.00"))
Tjetra

Më poshtë janë etiketat për boshtet X dhe Y. Boshti Y varion nga 0 në vlerën maksimale të kthyer nga pyetja, ndërsa pikat e të dhënave të boshtit X ngarkohen nga lista xAxisLabels. Së fundi, vetisë ImageUrl të elementit Image i caktohet vlera e lidhjes së dhënë (URL).

“Shtimi i dy boshteve
chartUrl.Append ("& chxt = x, y")

"Shtimi i vlerave për boshtin y
chartUrl.AppendFormat ("& chxr = 1.0, (0)", maxValue.ToString ("0"))

"Shtimi i etiketave për boshtin X
chartUrl.AppendFormat ("& chxl = 0: | (0)", String.Join ("|", xAxisLabels.ToArray ()))

"Po ngarkon imazhin chartUrl" "në vetinë imgChart të elementit Image
imgChart.ImageUrl = chartUrl.ToString ()
Fundi Nën

Në fund ju duhet të shihni diagramin më poshtë. Figura e parë tregon shitjet e vitit 1996 në një grafik rreshtor, dhe e dyta tregon shitjet e vitit 1997 duke përdorur një grafik me shtylla.

konkluzioni

Google Chart API ofron shpejt dhe mënyrë e lehtë duke krijuar shumë tipe te ndryshme grafikët për faqen tuaj të internetit. Për të krijuar një grafik, duhet të bëni një kërkesë nëpërmjet URL-së për API-në e grafikut të Google, ndërsa kaloni karakteristikat e grafikut (dimensionet, pikat e të dhënave, ngjyrat, etiketat, etj.) duke përdorur një varg pyetjesh. Chart API kthen një imazh që mund ta shfaqni në një element ... Me pak punë, mund të krijoni një lidhje të tillë grafiku direkt nga një faqe interneti ASP.NET, si dhe të krijoni grafikët bazuar në informacionin nga baza e të dhënave. Në këtë artikull, ne shikuam se si të krijoni manualisht një lidhje, dhe në vijim do të shikojmë një kontroll të specializuar që mbështet lidhjen deklarative të të dhënave dhe të tjera. veçori të dobishme.

Argëtohu me programim!

Gjithmonë kam pyetur veten se si u shfaq një frazë e tillë si "një foto zëvendëson një mijë fjalë". Mund t'i atribuohet lehtësisht menaxherëve, pasi janë ata që, pasi shikojnë një listë të gjatë numrash, mund të gjejnë një grafik në fund të faqes që kombinon të gjithë numrat, duke demonstruar kështu frazën e dhënë. Grafikët dhe grafikët ofrojnë një përmbledhje të shpejtë të shumë informacioneve. Me ndihmën e një diagrami, një person mund të vërejë shpejt çdo prirje, të krahasojë rezultate të ndryshme ose të vërejë një model.

Ka shumë mënyra për të krijuar grafikët në një faqe interneti ASP.NET. Ju mund të përdorni klasa në hapësirën e emrave System.Drawing për të krijuar diagrame në mënyrë programore. Ju gjithashtu mund të përdorni Microsoft Web Office Komponentët (OWC). Ekziston gjithashtu softuer falas në formën e mjeteve të vizatimit të diagramit, si dhe një bollëk komponentësh të palëve të treta. Microsoft gjithashtu ka ndërhyrë për të luajtur dhe ka ofruar Microsoft Chart Controls për .NET Framework 3.5 SP1.

Ky artikull shikon një mënyrë për të përdorur API-në e grafikut të Google për të krijuar grafikët. Google Chart API është një shërbim falas nga Google që lejon zhvilluesit e aplikacioneve në ueb të krijojnë imazhe grafiku në fluturim duke krijuar një element me një atribut src që tregon një lidhje URL që përfshin të dhëna grafiku, etiketa dhe informacione të tjera për vargun e pyetjes. Për shembull, grafiku i paraqitur në të djathtë është i disponueshëm në http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1/Q2/Q3/Q4&chtt= 2008 % 20Shitjet% 20Me% 20Tremujor. Lexoni për të mësuar se si të përdorni API-në e grafikut të Google në faqen tuaj të internetit ASP.NET!

Përmbledhje e API-së së grafikut të Google

Google Chart API i lejon zhvilluesit të krijojnë lloje të ndryshme grafikësh menjëherë. Google Chart API ruhet nga një lidhje me një burim (URL) në serverët e uebit të Google dhe kur merret një lidhje e formatuar siç duhet (URL), ajo e kthen grafikun si imazh. Karakteristikat e grafikut (ngjyrat, titujt, boshtet, pikat në grafik etj.) përcaktohen nëpërmjet një vargu të pyetjeve të lidhjes (URL). Imazhi që rezulton mund të shfaqet duke përdorur elementin , ose mund të ruhet në sistemin e skedarëve të serverit tuaj të internetit ose në një bazë të dhënash. Pjesa më e mirë është se Google Chart API është falas dhe nuk kërkon ndonjë llogari ose proces regjistrimi!

Lidhja kryesore me Google Chart API është http://chart.apis.google.com/chart?... Parametrat që përcaktojnë shfaqjen e grafikut vijojnë pas simbolit? Ka shumë parametra që mund t'i specifikoni përmes vargut të pyetjes. Parametrat e vetëm të kërkuar janë madhësia e grafikut (chs), të dhënat e grafikut (chd) dhe lloji i grafikut (cht). Tabela e mëposhtme përshkruan disa nga parametrat e përdorur:

Duke përdorur informacionin e mësipërm, mund të provoni krijimin e grafikëve dhe grafikëve tuaj duke përdorur API-në e grafikut të Google. Për shembull, lidhja e mëposhtme do të gjenerojë grafiku i linjës me dimensione 300x200 dhe vlera 43, 23, 12, 62, 34 dhe 39, si dhe titullin "Trafiku mujor": http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t :69.3,37.1 , 19.4,100.0,54.8,62.9 & chtt =% mujore 20Trafiku

Vini re se pikat e grafikut të dërguara në parametrin chd nuk janë ato që duam të vizatojmë në komplot - 43, 23, 12, 62, 34 dhe 39. Në vend të kësaj, përqindjet u dërguan në vlerën më të madhe të këtyre pikave. Me fjalë të tjera, pika e grafikut x konvertohet në përqindje duke përdorur shprehjen (x / maxDataPoint) * 100. Për shembull, vlera reale 43 bëhet 43/62 * 100 = 69,3.

Dhe do të merrni daljen e mëposhtme:

Duket mirë, apo jo? Ky diagram është shumë i thjeshtë dhe na u deshën 1.5 sekonda për ta krijuar atë. Nëse kaloni më shumë kohë duke eksploruar mundësitë e API-së së grafikut të Google, do të gjeni parametra që mund t'i përdorni për të specifikuar ngjyrat, për të shtuar boshte, etiketa dhe karakteristika të tjera standarde. Për shembull, ne mund të përfshijmë vlera numerike në boshtin Y për të treguar numrin e vizitave dhe ditët në boshtin X, thjesht duke përditësuar lidhjen për të përdorur vargun e mëposhtëm të pyetjes: Cht = lc & chs = 300x200 & chd = t: 69,3,37,1,19,4 , 100,0,54,8,62,9 & chds = 0,62 & chtt =% mujore 20Trafiku & chxt = x, y & chxl = 0: / 1 / 7 / 14 / 21 / 31 & chxr = 1.0.62

Kështu do të duket diagrami:

Gjenerimi i një grafiku Google për një faqe ASP.NET duke përdorur informacion nga një bazë të dhënash

Me më shumë punë, mund të krijoni një grafik bazuar në vlerat nga një bazë të dhënash duke përdorur API-në e grafikut të Google. Thjesht duhet të krijojmë një varg pyetjesh të përshtatshme bazuar në të dhënat për të cilat duam ta krijojmë, llojin e grafikut dhe etiketat e boshteve X dhe Y (nëse ka). Më vonë në këtë artikull, ne do të ecim në ndërtimin e një vargu pyetjesh në një faqe ASP.NET për një pyetje të bazës së të dhënave që kthen shitjet sipas muajve për Tregtarët Northwind. Ju mund të shkarkoni kodin e punës në fund të artikullit.

Hapi i parë është krijimi i një pyetjeje që kthen të dhënat e kërkuara. Shembulli im përdor bazën e të dhënave Northwind, e cila ruan informacione për produktet, klientët, porositë, etj. Për këtë shembull, vendosa të krijoj një tabelë të shitjeve bruto sipas muajve të një viti të caktuar. Kërkesa e mëposhtme kthen informacionin e dhënë për një vit të caktuar:

ZGJIDH MUAJIN (o.Data e porositjes) AS MuajVal, SHUMË (od.Çmimi Njësi * od.Sasia) AS Total
NGA Porositë AS o
BASHKIMI I BRENDSHËM SI ON ON
od.UrderID = o.UrderID
KU (VITI (o.Data e porosisë) = @Viti)
GRUPI PËR MUAJ (o.Data e porosisë)
POROSIT SIPAS MuajitVal

Baza e të dhënave Northwind ka shitje për 1996, 1997 dhe 1998. Nëse kaloni një nga këto vlera si parametër te @Year, do të merrni rezultatet e mëposhtme:

Shembulli specifikon pyetjen e referuar në një kontroll SqlDataSource dhe shfaq rezultatet në një faqe në një kontroll GridView. GridView është përshtatur për të shfaqur rezultatet për kolonën Total në formatin e monedhës, dhe gjithashtu ka formatuar kolonën MonthVal në mënyrë që çdo rresht të përmbajë vetëm tre shkronjat e para të çdo muaji. Ky formatim MonthVal trajtohet nga një funksion ndihmës i sfondit, DisplayMonthName, i cili merr muajin si vlerë numerike (1, 2, ..., 12) dhe kthen një vlerë të formatuar ("Jan", "Feb", ..., "Dhjetor"). Shtova gjithashtu një kontroll DropDownList në faqe në mënyrë që përdoruesi të mund të specifikojë një vlerë për parametrin @Year - DropDownList është i koduar në 1996, 1997 dhe 1998.

Përveç kontrolleve SqlDataSource, GridView dhe DropDownList për vitin, faqja përfshin një kontroll Image për shfaqjen e grafikut. Vetia ImageUrl e elementit Image është caktuar në mënyrë programore në lidhjen përkatëse të URL-së në klasën e kodit të sfondit. Kjo trajtohet në metodën DisplayChart. Kjo metodë fillon duke krijuar pjesën kryesore të lidhjes (URL) - llojin e grafikut (cht), madhësinë e grafikut (chs) dhe titullin e grafikut. Lloji dhe madhësia e grafikut diktohen nga vlerat e zgjedhura nga përdoruesi duke përdorur kontrollet DropDownList.

Nëngrafikë e mbrojtur e ekranit ()
“Ndërtimi i një diagrami lidhjesh
Dim grafiku Url si StringBuilder i ri ("http://chart.apis.google.com/chart?")

"Shtimi i një lloji grafiku
chartUrl.AppendFormat ("cht = (0)", Server.UrlEncode (ddlChartType.SelectedValue))

"Shtimi i një madhësie grafiku
chartUrl.AppendFormat ("& chs = (0)", Server.UrlEncode (ddlChartSize.SelectedValue))

“Duke shtuar një titull
chartUrl.AppendFormat ("& chtt = (0)", Server.UrlEncode ("Sales for" & ddlYear.SelectedValue))

Më pas, thirret metoda Select e SqlDataSource. Këto rezultate janë numëruar dhe vlerat e tyre janë mbledhur në një listë me vlera dhjetore (dhjetore) (literalDataPointsList) dhe etiketat për secilën pikë të të dhënave, domethënë shkurtesat për çdo muaj, shkruhen në një listë vlerash vargu. (xAxisLabels). Pasi të jenë shkruar vlerat e pikës së grafikut, ato do të shprehen si përqindje e vlerës më të madhe dhe do të ruhen në një listë vlerash vargu të emërtuar relativeDataPointValues. Vlerat në këtë listë më pas bashkohen (të ndara me presje) dhe i caktohen parametrit të të dhënave të grafikut (chd).

"Shtimi i pikave të të dhënave të grafikut. Së pari, ju duhet të merrni të dhënat nga kontrolli SqlDataSource
Dim dataPointsView As DataView = CType (dsChartData.Select (DataSourceSelectArguments.Empty), DataView)
Zbehni xAxisLabels si listë të re (të vargut)
Dim literalDataPointsList si listë e re (e dhjetore)
Dim maxValue si dhjetore = 0

"Leximi i pikave të të dhënave dhe ruajtja e vlerës maksimale
Për çdo pikë si DataRowView në dataPointsView
“Heqja e centëve nga çdo shumë
literalDataPointsList.Add (Convert.ToDecimal (pika ("Total")))

“Duke kontrolluar për një maksimum të ri
Nëse literalDataPointsList (literalDataPointsList.Count - 1)> maxValue Pastaj
maxValue = literalDataPointsList (literalDataPointsList.Count - 1)
Fundi Nëse

Nëse ddlChartSize.SelectedIndex<>0 OrElse literalDataPointsList.Count Mod 2 = 1 Pastaj
xAxisLabels.Add (DisplayMonthName (Convert.ToInt32 (pika ("MonthVal"))))
Përndryshe
xAxisLabels.Add (String.Empty)
Fundi Nëse
Tjetra

"Llogaritja e vlerave relative të pikave të të dhënave
Zbeh relativeDataPointValues ​​si listë e re (Of String)
Për çdo pikë si dhjetore në literalDataPointsList
Vlera e zbehtë relative si dhjetore = (pika / maxVlera * 100)
relativeDataPointValues.Add (relativeValue.ToString ("0.00"))
Tjetra

Më poshtë janë etiketat për boshtet X dhe Y. Boshti Y varion nga 0 në vlerën maksimale të kthyer nga pyetja, ndërsa pikat e të dhënave të boshtit X ngarkohen nga lista xAxisLabels. Së fundi, vetisë ImageUrl të elementit Image i caktohet vlera e lidhjes së dhënë (URL).

“Shtimi i dy boshteve
chartUrl.Append ("& chxt = x, y")

"Shtimi i vlerave për boshtin y
chartUrl.AppendFormat ("& chxr = 1.0, (0)", maxValue.ToString ("0"))

"Shtimi i etiketave për boshtin X
chartUrl.AppendFormat ("& chxl = 0: / (0)", String.Join ("/", xAxisLabels.ToArray ()))

Në fund ju duhet të shihni diagramin më poshtë. Figura e parë tregon shitjet e vitit 1996 në një grafik rreshtor, dhe e dyta tregon shitjet e vitit 1997 duke përdorur një grafik me shtylla.

konkluzioni

Google Chart API ofron një mënyrë të shpejtë dhe të lehtë për të krijuar shumë lloje të ndryshme grafikësh për faqen tuaj të internetit. Për të krijuar një grafik, duhet të bëni një kërkesë nëpërmjet URL-së për API-në e grafikut të Google, ndërsa kaloni karakteristikat e grafikut (dimensionet, pikat e të dhënave, ngjyrat, etiketat, etj.) duke përdorur një varg pyetjesh. Chart API kthen një imazh që mund ta shfaqni në një element ... Me pak punë, mund të krijoni një lidhje të tillë grafiku direkt nga një faqe interneti ASP.NET, si dhe të krijoni grafikët bazuar në informacionin nga baza e të dhënave. Në këtë artikull, ne shikuam se si të krijoni manualisht një lidhje, dhe në artikullin tjetër, do të shohim një kontroll të specializuar që mbështet lidhjen deklarative të të dhënave dhe veçori të tjera të dobishme.

Duke ruajtur informacionin në një bazë të dhënash, në këtë artikull është koha për të shfaqur të dhënat nga e njëjta bazë të dhënash në grafikisht... Po miq, për fillim do t'i hedhim një vështrim sipërfaqësor teknologjive të disponueshme. Dhe pasi kemi zgjedhur një, ne e integrojmë atë në faqen tonë të internetit.

Më lejoni t'ju kujtoj pak kush ka harruar që kjo është një pjesë e projektit. Planifikimi i artikullit të rishikimit mund të shihet.
Pra, le të fillojmë. Grafikët dhe grafikët e ndryshëm përdoren për të shfaqur të dhëna të ndryshme. Le të shohim disa biblioteka JavaScript për krijimin e vizualizimit të shpejtë dhe efikas të të dhënave.

Një listë e disa prej tyre:
- D3.js - Biblioteka JavaScript me burim i hapur, për përpunimin dhe vizualizimin e të dhënave. Grafikat krijohen duke përdorur HTML, SVG dhe CSS;
- Grafik JS - burim i hapur projekti. Përdor kanavacën HTML5 për paraqitje. Vjen me një grup grafikësh bazë "të gatshëm";
- Chartlist.js - përdoret nga SVG për paraqitjen e grafikëve / grafikëve, dhe gjithashtu menaxhohet dhe konfigurohet përmes pyetjeve të medias CSS3 dhe Sass;
- n3-grafikë - ndërtuar në krye të D3.js dhe AngularJS. Ai siguron shumë grafiku standard në formën e direktivave të personalizuara AngularJS;
- EmberCharts është me burim të hapur, i ndërtuar në D3.js dhe Ember.js. Përdor SVG për të dhënë grafikë;
- Smoothie Charts - për të punuar me një rrjedhë të dhënash në kohë reale. Ai përdor elementin e kanavacës HTML5 për të dhënë grafikun. Një bibliotekë e pastër JavaScript që ofron aftësi të tilla opsionale për grafikim në kohë reale;
-Chartkick - biblioteka JavaScript për hartimin e grafikëve / grafikëve në aplikacionet Ruby. Diagramet krijohen nëpërmjet SVG;
-MeteorCharts - Për paraqitjen e grafikëve, mund të zgjidhni ndonjë nga këto teknologji: HTML5 kanavacë, WebGL, SVG dhe madje edhe DOM;
-Flot - biblioteka JavaScript për jQuery që ju lejon të krijoni grafikë/grafikë.

Dhe gjithashtu shumë të tjerë. Do të fokusohem në - biblioteka JavaScript, për krijimi i thjeshtë grafikët. Ofron shumë tabela të para-ndërtuara. Ka shume cilësimet e konfigurimit(API i mjeteve të grafikut të Google është një grup i pasur me veçori mjetesh vizualizimi të të dhënave.) pamjen grafike. Grafikat jepen duke përdorur minierën HTML5 / SVG për të siguruar përputhshmërinë e shfletuesve dhe transportueshmërinë ndër-platformë në iPhone, iPad dhe Android. Përmban gjithashtu VML për të mbështetur versionet më të vjetra të IE.

Tani le të zbresim në praktikë. Google Charts ofron informacion dhe mjete për zhvilluesit për ta integruar këtë teknologji në burimin e tyre https://developers.google.com/chart/

Ne do të punojmë me një grafik të linjës (fig. c në të majtë). Le të kalojmë te shembulli i dhënë më poshtë këtë shërbim lidhjen e mëposhtme. https://developers.google.com/chart/interactive/docs/ gallery / linechart. Kur Një grafik rreshtor që jepet brenda shfletuesit duke përdorur SVG ose VML. Shfaq këshillat e veglave kur rri pezull mbi pika. Epo, ne takuam SVG përsëri brenda , kur ndërtoni një imazh ndërveprues të kontrolluesit të marrjes së të dhënave. Dhe këshillat e veglave janë gjithashtu të shkëlqyera.Le të marrim shabllonin e skriptit sipër grafikut të paraqitur dhe ta ngjisim në faqen tonë. Le të vizatojmë vetëm një grafik. Le të bëjmë disa ndryshime. Le të analizojmë ku çfarë dhe ku. Pra kodi është në studio.

Më poshtë në Fig. rezultati i përdorimit të këtij skripti:

Ndiqni lidhjen http: // ap -impulse.ru/interface.php në një ndërfaqe interaktive në internet. Në të majtë është një grafik i bazuar në të dhëna statike.

Më sipër, ne shqyrtuam përdorimin e bibliotekës së grafikëve të Google në burimin tonë, punën me dokumentacionin dhe analizuam kodin. Ky burim ka një përzgjedhje të gjerë grafikësh dhe grafikësh, si dhe një shembull të përdorimit të tyre dhe Përshkrimi i plotë... Siç u përmend më lart, ne kemi përdorur të dhëna statike. Për projektin tonë, ne duhet të lexojmë nga baza e të dhënave, në të cilën mësuam se si të futim të dhëna nga parametrat GET në artikullin e fundit. Në vijim, do të shqyrtojmë lidhjen me bazën e të dhënave, vizatimin dhe gjithashtu gabimet që ndodhin. Ne do të ndalemi në këtë për sot. Lamtumirë të gjithëve.