ເນື້ອຫາ
- 01. ໂລກ ໃໝ່ ທີ່ກ້າຫານ - ຕາຕະລາງ“ HTML5”
- ຕາຕະລາງ SVG - ວິທີແກ້ໄຂທີ່ມັກ
- 02. Google Charts API
- 03. ຕົວຢ່າງຕາຕະລາງງ່າຍໆ
- ກຳ ນົດຂໍ້ມູນ
- ການສະແດງຕາຕະລາງ
- 04. ຕົວຢ່າງທີ່ສັບສົນກວ່າ - ການວາງແຜນ tweets ໂດຍໃຊ້ຕາຕະລາງພື້ນທີ່
- 05. ວິທີການທີ່ສາມາດເຂົ້າເຖິງໄດ້
- 06. ຂໍແລະຈັດແຈງຂໍ້ມູນ tweet
- 07. ການຂຸດຄົ້ນຂໍ້ມູນຈາກຕາຕະລາງ HTML
- 08. ການສະແດງແຜນຜັງພື້ນທີ່
- 09. ເຮັດໃຫ້ມັນງາມ
- ໄປພ້ອມທີ່ຈະຕອບສະ ໜອງ ໄດ້ - ຕາຕະລາງປ່ຽນແປງໄດ້
- ຕາຕະລາງສຸດທ້າຍຂອງພວກເຮົາ
- ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ຄວາມຮູ້ທີ່ຕ້ອງການ: JavaScript, PHP ແລະ HTML
- ຕ້ອງການ: ຕົວທ່ອງເວັບແລະຕົວແກ້ໄຂຕົວ ໜັງ ສື
- ເວລາຂອງໂຄງການ: 45 ນາທີ
- ເອກະສານສະ ໜັບ ສະ ໜູນ
ຂໍ້ມູນແມ່ນທຸລະກິດໃຫຍ່ໃນເວັບ.ໃນແຕ່ລະມື້ເມື່ອພວກເຮົາຄົ້ນຫາພວກເຮົາສ້າງຂໍ້ມູນ ຈຳ ນວນມະຫາສານເຊິ່ງເຈົ້າຂອງເວັບໄຊທ໌້ແລະທຸລະກິດໃຊ້ເພື່ອ ກຳ ນົດທຸກສິ່ງທຸກຢ່າງຕັ້ງແຕ່ການອອກແບບ ໃໝ່ ໃຫຍ່ຕໍ່ໄປຈົນເຖິງຍຸດທະສາດແລະການໃຊ້ຈ່າຍໃນການໂຄສະນາ.
ເຖິງຢ່າງໃດກໍ່ຕາມ, ໃນສາຍຕາ, ຂໍ້ມູນສາມາດ ໜ້າ ເບື່ອທີ່ສຸດແລະເວັ້ນເສຍແຕ່ວ່າທ່ານເປັນນັກສະຖິຕິ, ຂໍ້ມູນ ຈຳ ນວນຫຼວງຫຼາຍອາດຈະເປັນເລື່ອງຍາກທີ່ຈະຍ່ອຍ. ໃນຖານະນັກອອກແບບເວບໄຊທ໌, semantics ແນະ ນຳ ວ່າຕາຕະລາງ HTML ຄວນຖືກ ນຳ ໃຊ້ເພື່ອ ນຳ ສະ ເໜີ ຂໍ້ມູນຍ້ອນວ່າມັນສະ ໜອງ“ ພາສາ” ທີ່ ເໝາະ ສົມທີ່ສຸດໃນການ ໝາຍ ຂໍ້ມູນແລະຕົວເລກ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ນອກ ເໜືອ ຈາກຊາຍແດນທີ່ດີງາມແລະແຖວແຖວ“ ມ້າລາຍ”, ຕາຕະລາງສະ ເໜີ ໃຫ້ພວກເຮົາ ໜ້ອຍ ໃນວິທີການທີ່ມີທ່າແຮງໃນການອອກແບບທີ່ພວກເຮົາຕ້ອງການເພື່ອປັບປຸງຄວາມເຂົ້າໃຈຂອງຂໍ້ມູນທີ່ພວກເຂົາມີ.
ດ້ວຍເຫດຜົນນີ້ - ແລະອື່ນໆນອກ ເໜືອ ຈາກນີ້ - ຍັງມີການເຕີບໃຫຍ່ຂະຫຍາຍຕົວຂອງການແກ້ໄຂທີ່ມີຢູ່ເພື່ອສ້າງຕາຕະລາງກາຟິກແລະແຜນວາດ. ເຄື່ອງມືເຊັ່ນ: Google Image Charts API ເດີມຊ່ວຍໃຫ້ພວກເຮົາເອົາຂໍ້ມູນຕາຕະລາງທີ່ ໜ້າ ເບື່ອແລະປ່ຽນມັນໃຫ້ກາຍເປັນອຸດົມສົມບູນທາງສາຍຕາ img> ຕາຕະລາງທີ່ອີງໃສ່ຂໍ້ມູນຕາຕະລາງຂອງພວກເຮົາເຮັດໃຫ້ມັນງ່າຍຕໍ່ການເຂົ້າໃຈແລະເຂົ້າໃຈ ສຳ ລັບຜູ້ໃຊ້ແລະລູກຄ້າຄືກັນ.
01. ໂລກ ໃໝ່ ທີ່ກ້າຫານ - ຕາຕະລາງ“ HTML5”
ຈົນກ່ວາເຄື່ອງມືການສ້າງຕາຂ່າຍໄຟຟ້າອອນໄລນ໌ຂ້ອນຂ້າງບໍ່ດົນມານີ້ໄດ້ສ້າງຮູບພາບແບບຄົງທີ່ໂດຍໃຊ້ img> ແທັກທີ່ທ່ານສາມາດຝັງໃສ່ ໜ້າ ເວບຂອງທ່ານ.
ເຖິງຢ່າງໃດກໍ່ຕາມດ້ວຍການມາເຖິງຂອງ HTML5, ປະຈຸບັນພວກເຮົາມີເຕັກໂນໂລຢີທາງເລືອກອີກຫຼາຍໆຢ່າງທີ່ມີໃຫ້ພວກເຮົາສ້າງຕາຕະລາງທີ່ມີການໂຕ້ຕອບຫລາຍຂື້ນ, ເຊິ່ງ ນຳ ພວກເຮົາໄປເກີນຂອບເຂດຂອງຮູບພາບແລະຮູບພາບທີ່ສະຖິດ. ບາງທີທີ່ໄດ້ຮັບຄວາມນິຍົມຫຼາຍທີ່ສຸດແມ່ນຜ້າໃບ HTML5 ແລະ SVG (Scalable Vector Graphics).
canvas> ຕາຕະລາງ
ອີງຕາມເຄືອຂ່າຍຂອງນັກພັດທະນາ Mozilla, ຜ້າໃບ HTML5 ແມ່ນອົງປະກອບ HTML ທີ່ສາມາດໃຊ້ເພື່ອແຕ້ມຮູບໂດຍໃຊ້ສະຄິບ. ຜ້າໃບແມ່ນໄວແລະແຕກຕ່າງຈາກຮູບພາບທີ່ສະຖິດສາມາດຖືກແຕ້ມແບບ ໃໝ່ ໃນ ໜ້າ ໂດຍ ນຳ ໃຊ້ສະຄິບ. ນີ້ເຮັດໃຫ້ມັນມີປະໂຫຍດຕໍ່ການສ້າງຕາຕະລາງການສະແດງຕາຕະລາງຈາກຕາຕະລາງ HTML ຢ່າງໄວວາແລະດ້ວຍການຂຽນສະຄິບທີ່ສະຫຼາດສາມາດຊ່ວຍໃຫ້ມີການໂຕ້ຕອບຂັ້ນພື້ນຖານບາງຢ່າງ.
ບາງເຄື່ອງມືການຜະລິດແຜ່ນແພທີ່ດີເລີດມີຢູ່. ສິ່ງທີ່ຂ້ອຍມັກທີ່ສຸດແມ່ນ FilQ ຂອງ jQuery Visualize plug-in ຂອງ Filament Group, ເຊິ່ງແມ່ນແຕ່ ນຳ ໃຊ້ຄວາມສາມາດພິເສດຂອງອັກສອນ excanvas.js ຂອງ Google ເພື່ອຮັບປະກັນແຜນພູມທີ່ສາມາດສ້າງຂື້ນໃນຕົວທ່ອງເວັບຕ່າງໆເຊັ່ນກັບ Internet Explorer 6.
ຕາຕະລາງ SVG - ວິທີແກ້ໄຂທີ່ມັກ
ໃນຂະນະທີ່ Canvas ເຮັດວຽກທີ່ດີເລີດໃນການສ້າງຕາຕະລາງແບບເຄື່ອນໄຫວ, ຂໍ້ບົກຜ່ອງຕົ້ນຕໍຂອງມັນແມ່ນວ່າມັນແມ່ນ API Graphics Graphics ທີ່ອີງໃສ່ pixel. ດ້ວຍ Canvas ທ່ານບໍ່ສາມາດຕິດຕົວກັບຜູ້ຈັດການເຫດການຫຼືວັດຖຸທີ່ມີຢູ່ແລ້ວ. ເມື່ອມັນຖືກແຕ້ມມັນຖືກແຕ້ມ.
ເຕັກໂນໂລຢີທາງເລືອກແມ່ນ SVG. ໃນຂະນະທີ່ບໍ່ມີສ່ວນໃດສ່ວນ ໜຶ່ງ ຂອງ HTML5 ຢ່າງເຂັ້ມງວດ, ມັນໃຫ້ຂໍ້ດີຫຼາຍຢ່າງກ່ຽວກັບ Canvas ສຳ ລັບການສາກໃນເວັບ.
ອັນດັບ ໜຶ່ງ ໃນບັນດາສິ່ງເຫລົ່ານີ້ແມ່ນວ່າ SVG ແມ່ນ vector ທີ່ອີງໃສ່ແລະຖືກອະທິບາຍໂດຍໃຊ້ syntax ທີ່ອີງໃສ່ XML. ນີ້ຫມາຍຄວາມວ່າມັນຮັກສາ DOM ທີ່ຄຸນລັກສະນະສາມາດອ່ານແລະປັບປຸງແບບເຄື່ອນໄຫວຜ່ານການຂຽນຢູ່ຈຸດໃດກໍ່ຕາມໃນຊີວິດຂອງ ໜ້າ. ໃນຂະນະທີ່ມີການພິຈາລະນາການປະຕິບັດທີ່ກ່ຽວຂ້ອງກັບ DOM - ໂດຍສະເພາະໃນເວລາທີ່ເຮັດວຽກກັບແຟ້ມທີ່ມີຂະ ໜາດ ໃຫຍ່ກວ່າ - ໂດຍປົກກະຕິຂ້ອຍຮູ້ສຶກວ່າ SVG ແມ່ນເຕັກໂນໂລຢີທີ່ ເໝາະ ສົມກວ່າ ສຳ ລັບການສ້າງຕາຕະລາງໃນເວັບ ...
... ແລະມັນປະກົດວ່າ Google ເຫັນດີກັບຂ້ອຍ!
02. Google Charts API
Google ຮັກສາແລະພັດທະນາຫ້ອງສະ ໝຸດ ທີ່ມີຮູບແບບເຕັມຮູບແບບທີ່ເອີ້ນວ່າ Google Charts API. ມັນມີປະສິດທິພາບສູງແລະເປັນ Google, ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ແລະເປັນເອກະສານເປັນຢ່າງດີ. ເວົ້າລວມແລ້ວ, ມັນເປັນທາງເລືອກທີ່ດີເລີດ ສຳ ລັບການໃສ່ໃນເວັບ.
ໃນຂະນະທີ່ຮູບແບບຕົ້ນສະບັບອີງໃສ່ຮູບພາບ, API ທີ່ຖືກປັບປຸງໃນປັດຈຸບັນໃຊ້ພະລັງຂອງ HTML5 ແລະ SVG ເພື່ອສະແດງແຜນພູມທີ່ຫຼາກຫຼາຍເຊິ່ງສາມາດປັບແຕ່ງໄດ້ແລະອະນຸຍາດໃຫ້ມີການໂຕ້ຕອບທີ່ສັບສົນ.
ຖອຍຫລັງທີ່ເຂົ້າກັນໄດ້ຜ່ານ VML ສຳ ລັບ IE ລຸ້ນເກົ່າ, ຕາຕະລາງຈະມີຜົນດີໃນທຸກລະບົບຂອງອຸປະກອນລວມທັງໂທລະສັບ iOS ແລະ Android. ບໍ່ຕ້ອງມີ plugins ໃດໆ!
03. ຕົວຢ່າງຕາຕະລາງງ່າຍໆ
ມັນງ່າຍດາຍທີ່ຈະລຸກຂຶ້ນແລະແລ່ນກັບ Google Charts. ການສາທິດນີ້ - ອີງໃສ່ຕົ້ນສະບັບທີ່ຢູ່ໃນເອກະສານທາງການ - ສະແດງໃຫ້ເຫັນແຜນວາດ Pie ງ່າຍໆໃນການກະ ທຳ. ເບິ່ງທີ່ແຫຼ່ງຂໍ້ມູນກ່ອນທີ່ຈະ ດຳ ເນີນການຕໍ່ໄປ.
ເພື່ອສະແດງຕາຕະລາງ, ພວກເຮົາຕ້ອງການສາມຫ້ອງສະຫມຸດເພື່ອໃຫ້ມີ. ສິ່ງເຫລົ່ານີ້ຖືກໂຫລດຜ່ານ script> ແທັກກ່ອນທີ່ລະຫັດທີ່ ກຳ ນົດເອງຈະຖືກ ດຳ ເນີນການ:
- Google JSAPI API
- ຫໍສະ ໝຸດ Google Visualization - google.load (,'ພາບສາຍຕາ'’1.0’, {'ການຫຸ້ມຫໍ່': ['ຕາຕະລາງຫຼັກ']});
- ແພັກເກັດ ສຳ ລັບຕາຕະລາງນັ້ນເອງ - google.load ('ການເບິ່ງເຫັນ', '1.0', {'ແພກເກດ': ['ຕາຕະລາງຫຼັກ']});
ເມື່ອຫ້ອງສະ ໝຸດ ທີ່ຕ້ອງການມີແລ້ວພວກເຮົາອ້າງອີງເຖິງ ໜ້າ ທີ່ທີ່ຈະໃຊ້ເປັນການເອີ້ນຄືນ ສຳ ລັບເວລາທີ່ຫໍສະ ໝຸດ ໄດ້ ສຳ ເລັດການໂຫຼດ. ການໂທຄືນນີ້ຈະ ກຳ ນົດຂໍ້ມູນຂອງພວກເຮົາແລະແຕ້ມຕາຕະລາງ.
google.setOnLoadCallback (drawChart); // drawChart ແມ່ນການເອີ້ນຄືນຂອງພວກເຮົາ
function functionChart () {
// ລະຫັດ ສຳ ລັບການແຕ້ມຕາຕະລາງຂອງພວກເຮົາ (ເບິ່ງບົດຂຽນຂ້າງລຸ່ມນີ້)
}
ກຳ ນົດຂໍ້ມູນ
ພາຍໃນຂອງພວກເຮົາ drawChart () ປະຈຸບັນນີ້ພວກເຮົາ ຈຳ ເປັນຕ້ອງ ກຳ ນົດຂໍ້ມູນຂອງພວກເຮົາ. ຂໍ້ມູນທັງ ໝົດ ທີ່ຈະໃຊ້ ສຳ ລັບຕາຕະລາງຂອງພວກເຮົາຕ້ອງໄດ້ຖືກຫໍ່ເຂົ້າໃນຊັ້ນ JavaScript ທີ່ເອີ້ນວ່າ google.visualization.DataTable. ນີ້ແມ່ນການສະແດງໂດຍພື້ນຖານຂອງຕາຕະລາງ 2D ທີ່ມີແຖວແລະຖັນ, ຫຼາຍເທົ່າກັບຕາຕະລາງ HTML.
// ສ້າງຕາຕະລາງຂໍ້ມູນ.
var data = google.visualization.DataTable () ໃໝ່;
data.addColumn ('ຊ່ອຍແນ່', 'ຄຳ ຕອບ');
data.addColumn ('ໝາຍ ເລກ', 'ຜົນໄດ້ຮັບ');
data.addRows ([
['ນັກພັດທະນາ', 28],
['ຜູ້ອອກແບບເວບໄຊທ໌', 12],
['ຜູ້ອອກແບບ', 18],
['Web Master', 14],
['Pixel Pusher', 5]
]);
ໃນຕົວຢ່າງຂອງພວກເຮົາພວກເຮົາ ກຳ ນົດຕົວຢ່າງ ໃໝ່ ຂອງຫ້ອງຮຽນ. ຈາກນັ້ນພວກເຮົາຕັ້ງຖັນແລະແຖວໂດຍໃຊ້ addColumn () ແລະ addRow () ວິທີການສະຫນອງໃຫ້.
ທ່ານສາມາດຊອກຮູ້ເພີ່ມເຕີມກ່ຽວກັບວິທີການກະກຽມແລະ ກຳ ນົດຂໍ້ມູນໃນເອກະສານທາງການ.
ການສະແດງຕາຕະລາງ
ໂດຍໄດ້ ກຳ ນົດຂໍ້ມູນຂອງພວກເຮົາແລ້ວພວກເຮົາ ກຳ ນົດບາງຕົວເລືອກການຕັ້ງຄ່າພື້ນຖານ ສຳ ລັບຂະ ໜາດ ແລະ ກຳ ນົດຫົວຂໍ້ ສຳ ລັບຕາຕະລາງຂອງພວກເຮົາ.
// ກຳ ນົດຕົວເລືອກຕາຕະລາງ
ຕົວເລືອກ var = {
'ຫົວຂໍ້': 'ຕຳ ແໜ່ງ ວຽກ ສຳ ລັບຄົນທີ່ເຮັດວຽກຢູ່ໃນເວັບ',
'width': 500,
'ຄວາມສູງ': 400
};
ຕາຕະລາງຂອງ Google ແມ່ນສາມາດປັບປ່ຽນໄດ້ສູງແລະພວກເຮົາຈະຄົ້ນຫາດ້ານນີ້ໃຫ້ລະອຽດກວ່າເກົ່າໃນພາຍຫຼັງໃນການສອນ.
// Instantiate ແລະແຕ້ມຕາຕະລາງຂອງພວກເຮົາ, ຖ່າຍທອດໃນບາງທາງເລືອກ.
var chart = google.visualization.PieChart (ເອກະສານ .getElementById ('chart_div'));
chart.draw (ຂໍ້ມູນ, ຕົວເລືອກ);
ຕໍ່ໄປພວກເຮົາຈະເລີ້ມຕົວຢ່າງ ໃໝ່ ຂອງ“ ການເບິ່ງເຫັນ” ພວກເຮົາຕ້ອງການສ້າງ (ໃນຕົວຢ່າງນີ້ມັນແມ່ນ PieChart) ແລະໂທຫາມັນ ແຕ້ມ () ວິທີການ, ການສົ່ງເອກະສານອ້າງອີງເຖິງອົງປະກອບ DOM ທີ່ພວກເຮົາຕ້ອງການໃຫ້ຕາຕະລາງຂອງພວກເຮົາຖືກສະແດງແລະຕົວເລືອກຕ່າງໆທີ່ພວກເຮົາຕັ້ງຄ່າຂ້າງເທິງ.
ນັ້ນແມ່ນມັນ - ຕາຕະລາງຂອງພວກເຮົາຂຶ້ນແລະເຮັດວຽກແລ້ວ.
04. ຕົວຢ່າງທີ່ສັບສົນກວ່າ - ການວາງແຜນ tweets ໂດຍໃຊ້ຕາຕະລາງພື້ນທີ່
ດ້ວຍຕົວຢ່າງທີ່ລຽບງ່າຍຂອງພວກເຮົາເຮັດ ສຳ ເລັດແລ້ວເວລານີ້ທີ່ຈະຕ້ອງທົດລອງສັບຊ້ອນສິ່ງເລັກໆນ້ອຍໆ. ພວກເຮົາ ກຳ ລັງໃຊ້ Twitter API ເພື່ອຂໍຂໍ້ມູນກ່ຽວກັບກະແສ Twitter ຂອງຂ້ອຍແລະສະແດງຢູ່ໃນ Area Graph ເພື່ອສະແດງ ຈຳ ນວນ tweets ຕາມວັນທີທີ່ຂ້ອຍໄດ້ສົ່ງໃນອາທິດຜ່ານມາຫຼືດັ່ງນັ້ນ. ບໍ່ແມ່ນຂໍ້ມູນລ້າສຸດທີ່ບໍ່ເຄີຍມີມາກ່ອນ, ແຕ່ມີບາງຢ່າງທີ່ແທ້ຈິງໃນການເຮັດວຽກກັບຢ່າງໃດກໍ່ຕາມ.
ທ່ານສາມາດເບິ່ງການສາທິດຂອງສິ່ງນີ້ໄດ້ທີ່ນີ້.
05. ວິທີການທີ່ສາມາດເຂົ້າເຖິງໄດ້
ໃນຕົວຢ່າງຂອງ Piechart ທີ່ງ່າຍດາຍຂໍ້ມູນຂອງພວກເຮົາຖືກປະດິດຂື້ນມາແຕ່ວ່າຮ້າຍແຮງກວ່າເກົ່າມັນຖືກປິດແລະ ກຳ ນົດຢູ່ໃນ JavaScript. ນີ້ບໍ່ແມ່ນວິທີທີ່ສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍທີ່ສຸດ.
ດັ່ງທີ່ໄດ້ກ່າວມາກ່ອນ ໜ້າ ນີ້, ຂໍ້ມູນແມ່ນຕົວແທນທີ່ດີທີ່ສຸດໃນຕາຕະລາງ HTML ເພາະມັນເຮັດໃຫ້ຜູ້ໃຊ້ເຕັກໂນໂລຢີຊ່ວຍເຫຼືອແລະອຸປະກອນ ຈຳ ນວນ ໜ້ອຍ ເຫຼົ່ານັ້ນບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຈາກ Google Chart API.
ໂດຍຫລັກການແລ້ວຂໍ້ມູນ tweet ຂອງພວກເຮົາຄວນມີຢູ່ໃນ ໜ້າ ເປັນຕາຕະລາງ HTML ແລະພວກເຮົາຄວນໃຊ້ JavaScript ເພື່ອເກັບກ່ຽວຂໍ້ມູນແລະສົ່ງມັນໄປທີ່ຫໍສະມຸດພາບເພື່ອໃຊ້ໃນຕາຕະລາງການເຄື່ອນໄຫວ.
06. ຂໍແລະຈັດແຈງຂໍ້ມູນ tweet
ຢູ່ເທິງສຸດຂອງພວກເຮົາ index.php ພວກເຮົາຮ້ອງຂໍໃຫ້ Twitter API ສຳ ລັບ 40 tweets ຫຼ້າສຸດຈາກ ກຳ ນົດເວລາຂອງຜູ້ໃຊ້ຂອງຂ້ອຍ (ທ່ານສາມາດປ່ຽນສິ່ງນີ້ໄປຫາເຈົ້າໄດ້ຖ້າເຈົ້າຕ້ອງການ). ຄຳ ຕອບຂອງ JSON ແມ່ນອ່ານເຂົ້າໃນສາຍແລະຫຼັງຈາກນັ້ນແຍກອອກເປັນແຖວເຊື່ອມໂຍງໂດຍຜ່ານຕົວຈິງເປັນພາລາມິເຕີທີສອງຕໍ່ json_decode ໜ້າ ທີ່.
$ jsonurl = "http://twitter.com/statuses/user_timeline/get_dave.json?count=40";
$ json = file_get_contents ($ jsonurl, 0, null, null);
$ json_output = json_decode ($ json, ຄວາມຈິງ);
ພວກເຮົາ ຈຳ ເປັນຕ້ອງຮູ້ວ່າມີຈັກ ຈຳ ນວນ tweets ທີ່ຖືກສົ່ງໃນແຕ່ລະມື້ສະນັ້ນພວກເຮົາ ກຳ ນົດ ກຳ ນົດແຖວຕໍ່ໄປ (tweet_dates) ເຊິ່ງຄີຈະເປັນແບບຕ່າງໆ created_at ວັນທີຈາກນ້ໍາ Twitter ຂອງພວກເຮົາ. ຫຼັງຈາກນັ້ນພວກເຮົາປ່ອຍຜ່ານ tweets ຂອງພວກເຮົາໂດຍປຽບທຽບເວລາແລະເພີ່ມມູນຄ່າຂອງປຸ່ມທີ່ ເໝາະ ສົມເພື່ອເພີ່ມຂີດຄວາມທີ່ຖືກສົ່ງໃນແຕ່ລະວັນ.
$ tweet_dates = ອາເລ ();
$ curr_tweet_date = '';
// ສ້າງ ຈຳ ນວນຂອງ Tweets ໂດຍການຄົ້ນຫາວັນທີ ($ json_output ເປັນ $ tweet) {
// ຮັບເອົາເວລາທີ່ໃຊ້ໄດ້ຈາກ json
$ tweet_date = ວັນທີ ("d / m / y", strtotime ($ tweet ['created_at']);
// ຖ້າວັນທີຂອງ tweets ບໍ່ກົງກັບວັນທີ tweets ກ່ອນ ໜ້າ ນີ້ແລ້ວກໍ່ຈະເລີ່ມຕົ້ນລະຫັດ ໃໝ່ ໃນແຖວ
ຖ້າ ($ curr_tweet_date! = $ tweet_date) {
$ tweet_dates [$ tweet_date] = 1; // ເພີ່ມກຸນແຈ ໃໝ່ ແລະ ກຳ ນົດຄ່າໃຫ້ 1
$ curr_tweet_date = $ tweet_date; // ຕັ້ງຄ່າວັນທີ var ປະຈຸບັນ
} ອີກ {// ຖ້າວັນທີ tweet ປັດຈຸບັນກົງກັບໄຊຊະນະ
$ tweet_dates [$ tweet_date] ++; // ມູນຄ່າວັນທີເພີ່ມວັນ
}
} // foreach ສຸດທ້າຍ
ເມື່ອກັບມາແລ້ວ (ໃຊ້ array_reverse), ນີ້ເຮັດໃຫ້ພວກເຮົາມີສ່ວນຮ່ວມທີ່ຄວນເບິ່ງຄືວ່າຄ້າຍຄືກັບ:
ອາເລ
(
[28/03/12] => 7
[29/03/12] => 1
[30/03/12] => 4
[31/03/12] => 1
[02/04/12] => 1
[03/04/12] => 3
[04/04/12] => 2
[08/04/12] => 1
[11/04/12] => 2
[12/04/12] => 3
[13/04/12] => 11
[14/04/12] => 1
)
ໃນສ່ວນຂອງ ໜ້າ HTML ຂອງພວກເຮົາ, ດຽວນີ້ພວກເຮົາສາມາດເຊື່ອມຕໍ່ເຂົ້າແຖວນີ້ເພື່ອສ້າງຕາຕະລາງ HTML ທີ່ມີຄໍ ລຳ ສຳ ລັບ“ ວັນທີ” ແລະ“ Tweets”.
ພວກເຮົາສາມາດປະສົບຜົນ ສຳ ເລັດໄດ້ຄືກັນຜ່ານທາງ JavaScript, ແຕ່ການ ນຳ ໃຊ້ວິທີການທີ່ອີງໃສ່ PHP ເຮັດໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນຫຼັກແມ່ນມີໃຫ້ກັບຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອຄື markup.
07. ການຂຸດຄົ້ນຂໍ້ມູນຈາກຕາຕະລາງ HTML
ຕໍ່ໄປພວກເຮົາຕ້ອງການເກັບກ່ຽວຂໍ້ມູນ tabular. ຂອງພວກເຮົາ functions.js file ກຳ ນົດ ຕຳ ແໜ່ງ ທີ່ເອີ້ນວ່າ getData () ຊຶ່ງຕໍ່ມາເອີ້ນວ່າໂດຍ drawChart () ຟັງຊັນໂທກັບຄືນເພື່ອດຶງຂໍ້ມູນທີ່ຕ້ອງການ. ຈຸດປະສົງຂອງ ໜ້າ ທີ່ນີ້ແມ່ນເພື່ອຜະລິດໂຄງປະກອບທີ່ງ່າຍດາຍເຊິ່ງພວກເຮົາສາມາດສົ່ງຕໍ່ໄປ google.visualization.arrayToDataTable () ວິທີການທີ່ປ່ຽນມັນເປັນຮູບແບບທີ່ຕ້ອງການໂດຍຕາຕະລາງ API.
ມີຫລາຍວິທີໃນການສ້າງຮູບແບບຂໍ້ມູນທີ່ຖືກຕ້ອງແຕ່ວ່າ arrayToDataTable () ງ່າຍທີ່ສຸດ ສຳ ລັບຈຸດປະສົງຂອງພວກເຮົາເພາະມັນເປັນອັດຕະໂນມັດສ່ວນໃຫຍ່.
ຮູບແບບທີ່ຄາດວ່າຈະແມ່ນແຖວທີ່ບັນຈຸຊຸດຂອງແຕ່ລະແຖວເຊິ່ງສະແດງເຖິງແຖວຂໍ້ມູນ. ພາຍໃນແຕ່ລະແຖວແມ່ນຂໍ້ມູນທີ່ຕ້ອງການ ສຳ ລັບແຕ່ລະຖັນ. ສ່ວນຫົວຂອງຖັນຈະຖືກຖືວ່າເປັນ "ແຖວ" ທຳ ອິດໃນແຖວຍົກເວັ້ນແຕ່ໄດ້ລະບຸໄວ້ເປັນຢ່າງອື່ນ.
[
['ວັນທີ', 'Tweets'], // ຖັນຫົວ
['04 / 04/2012 ', 25], // ແຖວຂໍ້ມູນ
['04 / 04/2012 ', 25] // ຂໍ້ມູນແຖວອື່ນ
]
ທ getData () function loops ຜ່ານແຕ່ລະ tr>, ອ່ານຄຸນຄ່າຂອງແຕ່ລະຄົນ ທ ຫຼື td> ແລະຈາກນັ້ນກໍ່ປະກາດ ຄຸນຄ່າ array ເພື່ອໃຫ້ກົງກັບຮູບແບບທີ່ຕ້ອງການ. ຂໍ້ມູນຂອງພວກເຮົາກຽມພ້ອມທີ່ຈະ ນຳ ໃຊ້ແລ້ວ.
08. ການສະແດງແຜນຜັງພື້ນທີ່
ພວກເຮົາກະກຽມຕົວຢ່າງ ໃໝ່ ຂອງປະເພດຕາຕະລາງເຂດຕາຕະລາງ, ຖ່າຍທອດຂໍ້ມູນຂອງພວກເຮົາແລະບາງຕົວເລືອກພື້ນຖານ:
google.visualization ໃໝ່ .AreaChart (ເອກະສານ .getElementById ('chart_div'));
chart.draw (ຂໍ້ມູນ, ຕົວເລືອກ);
09. ເຮັດໃຫ້ມັນງາມ
ຕາຕະລາງພື້ນຖານຂອງພວກເຮົາປະຈຸບັນໄດ້ປ່ອຍອອກມາປະມານດັ່ງຕໍ່ໄປນີ້:
ເຖິງຢ່າງໃດກໍ່ຕາມມັນໃຊ້ໄດ້ຜົນ, ຂ້ອຍບໍ່ຍິນດີທີ່ຈະ ນຳ ສະ ເໜີ ທັດສະນະນີ້“ ອອກຈາກຫ້ອງ” ຕໍ່ຜູ້ຊົມໃຊ້ຂອງຂ້ອຍຫຼືລູກຄ້າທີ່ເປັນຄວາມຈິງ. ໂຊກດີ Google Charts ໃຫ້ພວກເຮົາ
ຊຸດຂອງຕົວເລືອກ
ເຊິ່ງພວກເຮົາສາມາດປັບແຕ່ງເພື່ອປັບແຕ່ງຮູບລັກສະນະຂອງຕາຕະລາງຂອງພວກເຮົາ.
ເພື່ອເຮັດໃຫ້ຕາຕະລາງເບິ່ງຄືວ່າມີປະໂຫຍດຫຼາຍຂຶ້ນຂ້ອຍໄດ້ປ່ຽນຕົວເລືອກການ ນຳ ສະ ເໜີ ຈຳ ນວນ ໜຶ່ງ. ບາງທີການປ່ຽນແປງທີ່ ສຳ ຄັນທີ່ສຸດແມ່ນ:
- ຂ້ອຍໄດ້ຕັ້ງສີໃຫ້ເປັນສີ ດຳ # 666 (ໃຊ້ hAxis.textStyle.color).
- ຂ້ອຍໄດ້ປ່ຽນສາຍຕາຂ່າຍເປັນສີຂີ້ເຖົ່າ #eee ທີ່ອ່ອນໂຍນ (ໃຊ້ hAxis.gridlines.color).
- ຂ້ອຍໄດ້ປ່ຽນສີເສັ້ນເລີ່ມຕົ້ນໃຫ້ເປັນສີຟ້າ Twitter # 08C (ສີ).
- ຂ້ອຍໄດ້ຕັ້ງຄ່າ lineWidth ເປັນມູນຄ່າຫນາງາມຂອງ 4 ແລະປະກອບນີ້ໂດຍການເພີ່ມຂື້ນ pointSize (ຈຸດ / ຂໍ້) ໃຫ້ໃຫຍ່ກວ່າ 8.
- ຂ້າພະເຈົ້າໄດ້ ກຳ ນົດຄວາມຊັດເຈນຂອງພື້ນທີ່ໃຫ້ມີຄວາມໂປ່ງໃສກວ່າ (ໃຊ້ ພື້ນທີ່).
ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ທ່ານອ່ານບັນຊີລາຍຊື່ເຕັມຂອງຕົວເລືອກການຕັ້ງຄ່າທີ່ເປັນໄປໄດ້ເພື່ອໃຫ້ທ່ານສາມາດປັບແຕ່ງຕາຕະລາງໃຫ້ ເໝາະ ສົມກັບຄວາມຕ້ອງການຂອງທ່ານເອງ.
ດ້ວຍຕົວເລືອກເຫລົ່ານີ້ທີ່ຢູ່ໃນຕາຕະລາງຂອງພວກເຮົາໃນປະຈຸບັນນີ້ເບິ່ງຫຼາຍ ໜ້າ ຕາ:
ໄປພ້ອມທີ່ຈະຕອບສະ ໜອງ ໄດ້ - ຕາຕະລາງປ່ຽນແປງໄດ້
ຕາຕະລາງຂອງພວກເຮົາຕອນນີ້ແມ່ນດີແລ້ວແຕ່ມັນຍັງມີຂະ ໜາດ ທີ່ແນ່ນອນ. ຖ້າພວກເຮົາ ກຳ ລັງຜະລິດເວັບໄຊທ໌ຕອບສະ ໜອງ ພວກເຮົາ ຈຳ ເປັນຕ້ອງມີຂະ ໜາດ ຕາຕະລາງຂອງພວກເຮົາເພື່ອໃຫ້ກົງກັບຂະ ໜາດ ຂອງພາຊະນະຂອງມັນແລະຂະ ໜາດ ຂອງມຸມມອງມີການປ່ຽນແປງ.
ຂ້າພະເຈົ້າໄດ້ພົບເຫັນວ່າວິທີການທີ່ດີທີ່ສຸດທີ່ຈະປະສົບຜົນ ສຳ ເລັດແມ່ນການເຊື່ອມຕໍ່ກັບຕາຕະລາງ ໃໝ່ window.resize ເຫດການ. ວິທີນັ້ນເມື່ອປ່ອງຢ້ຽມປ່ຽນຂະ ໜາດ ແລ້ວການສົນທະນາຈະປ່ຽນ ໃໝ່ ໄປຫາຂະ ໜາດ ໃໝ່ ໂດຍໄວ.
ບັນຫາຕົ້ນຕໍຂອງວິທີການນີ້ແມ່ນວ່າ window.resize ເຫດການໄຟ ໄໝ້ ຫຼາຍຄັ້ງໃນແຕ່ລະເຫດການຂະ ໜາດ. ການເຮັດຕາຕະລາງຄືນ ໃໝ່ ເລື້ອຍໆ (ແລະບໍ່ ຈຳ ເປັນ) ເຮັດຕາຕະລາງມີການລົງໂທດການປະຕິບັດທີ່ຂ້ອຍຕ້ອງການຫລີກລ້ຽງ. ເພື່ອຫລີກລ້ຽງສິ່ງນີ້ຂ້ອຍໃຊ້ໂປແກຼມ Debounced ທີ່ດີທີ່ສຸດຂອງໂປແກຼມ Paul Irish ເພື່ອຮັບປະກັນເຫດການປັບຂະ ໜາດ ໃຫ້ພຽງແຕ່ຍິງຄັ້ງດຽວໃນຕອນທ້າຍຂອງໄລຍະເວລາທີ່ ກຳ ນົດ. ນີ້ ຈຳ ກັດ ຈຳ ນວນການຈັດອັນດັບຕາຕະລາງຕໍ່ window.resize.
$ (ໜ້າ ຕ່າງ) .smartresize (function () {
chart.draw (ຂໍ້ມູນ, ຕົວເລືອກ);
});
ຕາຕະລາງສຸດທ້າຍຂອງພວກເຮົາ
ໃນການສາທິດສຸດທ້າຍພວກເຮົາປະຈຸບັນມີຕາຕະລາງທີ່ ເໝາະ ສົມ, ສາມາດເຂົ້າເຖິງໄດ້, ຂ້າມຜ່ານຂອງ browser ເຊິ່ງຍັງມີເກັດຢູ່ກັບ ໜ້າ ຈໍອຸປະກອນ.
ຂ້ອຍຂໍແນະ ນຳ ໃຫ້ທ່ານຄຸ້ນເຄີຍກັບ Google dots API dots ເພື່ອໃຫ້ທ່ານສາມາດປັບປຸງແລະສ້າງສິ່ງທີ່ທ່ານໄດ້ຮຽນຮູ້ມານີ້ເພື່ອສ້າງຕາຕະລາງຂອງທ່ານເອງ. ຂ້າພະເຈົ້າຍັງຢາກດຶງດູດຄວາມສົນໃຈຂອງທ່ານໃຫ້ກັບໂຊລູຊັ່ນການຄິດໄລ່ແບບສະເພາະຂອງ SVG ເຊັ່ນ Morris.js ເຊິ່ງໃຊ້ທັງ jQuery ແລະRaphaëlເພື່ອແຕ້ມຕາຕະລາງຂອງມັນ.
ຄຳ ແນະ ນຳ ນີ້ບໍ່ໄດ້ສົມບູນແບບແລະຂ້ອຍເຫັນໃນແງ່ດີວ່າມີຫລາຍວິທີໃນການປັບປຸງແລະເສີມຂະຫຍາຍຜົນສຸດທ້າຍ. ຖ້າທ່ານຮູ້ເລື່ອງໃດໆກະລຸນາແຈ້ງໃຫ້ຂ້ອຍທາບໃນ ຄຳ ເຫັນ.
Dave Smith ແມ່ນຜູ້ອອກແບບດ້ານ ໜ້າ ດ້ານ ໜ້າ ເຊິ່ງຕັ້ງຢູ່ໃກ້ກັບເມືອງທີ່ສວຍງາມຂອງເມືອງ Bath, ອັງກິດ. ໃນເວລາທີ່ລາວບໍ່ໄດ້ເຮັດວຽກກ່ຽວກັບໂຄງການ ໃໝ່ໆ ແລະ ໜ້າ ຕື່ນເຕັ້ນ, ລາວສາມາດພົບເຫັນການຫຼີ້ນກະດິງໃນທຸກສິ່ງທຸກຢ່າງຈາກກຸ່ມ jazz Big ເຖິງວົງດົນຕີ Symphony. ທ່ານສາມາດຕິດຕາມກັບ Dave ໃນ Twitter ເປັນ @get_dave.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ວິທີການສ້າງແອັບ.
- ການເລືອກຕົວອັກສອນແບບ graffiti ຟຣີ
- ບົດແນະ ນຳ ພາບປະກອບ: ແນວຄວາມຄິດທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈທີ່ຈະລອງມື້ນີ້!
- ຄູ່ມືສຸດທ້າຍໃນການອອກແບບໂລໂກ້ທີ່ດີທີ່ສຸດ
- ຕົວອັກສອນເວັບຟຣີທີ່ດີທີ່ສຸດ ສຳ ລັບນັກອອກແບບ
- ແມ່ແບບໃບປິວທີ່ມີປະໂຫຍດແລະດົນໃຈ
- ຮູບເງົາ 3D ດີທີ່ສຸດຂອງປີ 2013
- ຄົ້ນພົບສິ່ງທີ່ເປັນຕໍ່ໄປ ສຳ ລັບ Augmented Reality
