บทช่วยสอนเกี่ยวกับ FusionCharts เจาะลึกใน jQuery

เผยแพร่แล้ว: 2022-03-11

การแสดงข้อมูลทำให้อ่านง่ายขึ้น

เมื่อต้องรับมือกับการวิเคราะห์ข้อมูล บริษัทส่วนใหญ่จะใช้ MS Excel หรือ Google ชีต แม้ว่าสิ่งเหล่านี้เป็นเครื่องมือที่ทรงพลัง แต่ก็ยากที่จะสังเกตแนวโน้ม แต่ก็ไม่สมเหตุสมผลเลยสำหรับแถวข้อมูลขนาดใหญ่ของข้อมูลสเปรดชีต การจัดการกับข้อมูลที่นำเสนอในลักษณะนี้ไม่น่าสนใจนัก แต่เมื่อคุณเพิ่มการแสดงข้อมูลลงในข้อมูลนั้นแล้ว สิ่งต่างๆ จะจัดการได้ง่ายขึ้น และนั่นคือหัวข้อของบทช่วยสอนในปัจจุบัน นั่นคือการสร้างแผนภูมิเชิงโต้ตอบโดยใช้ jQuery

การจัดการกับข้อมูลสเปรดชีตเป็นเรื่องที่น่าเบื่อ

เป็นการยากที่จะสังเกตแนวโน้มจากแถวของข้อมูลสเปรดชีต แต่เมื่อเพิ่มการแสดงภาพแล้ว...
ทวีต

ฉันจะใช้ไลบรารีแผนภูมิ JavaScript ของ FusionCharts สำหรับโปรเจ็กต์นี้ เนื่องจากมีไลบรารีขนาดใหญ่กว่า 90 แผนภูมิ เข้ากันได้กับทุกเบราว์เซอร์ และค่อนข้างใช้งานง่าย นอกจากนี้ยังมีปลั๊กอินเฉพาะสำหรับ jQuery ซึ่งจะทำให้งานของเราง่ายขึ้น

ฉันจะเริ่มต้นด้วยการสร้างแผนภูมิพื้นฐานโดยใช้ไลบรารี JavaScript หลักของ FusionCharts และปลั๊กอินแผนภูมิ jQuery จากนั้นฉันจะเพิ่มความสามารถในการเจาะลึกลงไป การเจาะลึกช่วยให้คุณเปลี่ยนจากแผนภูมิหนึ่งไปอีกแผนภูมิหนึ่งได้ด้วยการคลิกที่แผนภาพข้อมูล

คำว่า 'แผนภาพข้อมูล' เป็นบริบท มันหมายถึงคอลัมน์ในแผนภูมิคอลัมน์ เส้นในแผนภูมิเส้น ชิ้นวงกลมในแผนภูมิวงกลม เมื่อคลิกที่พล็อตข้อมูลจากแผนภูมิหลัก คุณจะถูกนำเสนอด้วยแผนภูมิย่อย โดยแสดงข้อมูลสัมพัทธ์ที่ลึกขึ้นหนึ่งระดับ

การคลิกพล็อตข้อมูลบนแผนภูมิหลักจะเป็นการเปิดแผนภูมิย่อย

การคลิกพล็อตข้อมูลบนแผนภูมิหลักจะเป็นการเปิดแผนภูมิย่อย

ทำความเข้าใจ FusionCharts

ก่อนที่เราจะเริ่มบทช่วยสอน เรามาพูดถึงกายวิภาคพื้นฐานของ FusionCharts กันก่อน ทุกแผนภูมิประกอบด้วยองค์ประกอบหลักเหล่านี้:

  • คำบรรยายภาพ: ชื่อเรื่องบนแผนภูมิ มันอธิบายสิ่งที่กำลังถูกสร้างแผนภูมิ
  • คำบรรยายใต้ภาพ: ข้อความใต้คำบรรยายที่ระบุข้อมูลแผนภูมิเพิ่มเติม บ่อยครั้งจะระบุกรอบเวลาที่รวบรวมข้อมูล
  • คำอธิบาย: สิ่งนี้จะแสดงสัญลักษณ์สำหรับแต่ละการลงจุดข้อมูลบนแผนภูมิ สามารถเปิดหรือปิดใช้งานพล็อตเฉพาะได้โดยคลิกที่ไอคอนคำอธิบายที่เกี่ยวข้อง
  • พล็อตข้อมูล: นี่คือการแสดงข้อมูลบนแผนภูมิ การลงจุดข้อมูลอาจเป็นคอลัมน์ในแผนภูมิคอลัมน์ เส้นในแผนภูมิเส้น หรือชิ้นวงกลมในแผนภูมิวงกลม
  • เคล็ดลับเครื่องมือ: ข้อความที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือแผนภาพข้อมูล ใช้เพื่อนำเสนอข้อมูลเพิ่มเติมเกี่ยวกับแผนภาพข้อมูลนั้นๆ

ชิ้นส่วนของ FusionChart

การสร้างแผนภูมิเจาะลึก

ก่อนที่เราจะเริ่ม นี่คือภาพหน้าจอของแผนภูมิที่เราจะทำในบทช่วยสอนนี้ คุณสามารถดู JSFiddle ที่นี่ หรือเข้าถึงซอร์สโค้ดแบบเต็มของโครงการบน GitHub repo ของฉัน

ตัวอย่างโปรเจ็กต์ jquery สุดท้ายของบทช่วยสอนนี้

ฉันได้แบ่งกระบวนการสร้างแผนภูมิเจาะลึกออกเป็นห้าขั้นตอน มาเริ่มกันเลย

ขั้นตอนที่ 1: รวมไฟล์ JavaScript และการสร้างคอนเทนเนอร์แผนภูมิ

อันดับแรก เราต้องรวมไฟล์ JS ทั้งหมดที่โปรเจ็กต์ของเราพึ่งพาโดยใช้แท็ก <script> หากยังไม่มีหน้านี้ โปรดสร้างเอกสาร HTML เปล่าและรวมไฟล์ด้านล่างในส่วน <head> ตอนนี้เราต้องการไฟล์สี่ไฟล์ต่อไปนี้:

  • ย่อ jQuery
  • ไลบรารี JS หลักของ FusionCharts (รวมทั้ง fusioncharts.js และ fusioncharts.charts.js )
  • ปลั๊กอิน jQuery ของ FusionCharts

ส่วน <head> ของเราจะมีลักษณะดังนี้:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

เมื่อเราได้รวมการพึ่งพาทั้งหมดแล้ว ก็ถึงเวลาสร้างคอนเทนเนอร์ <div> สำหรับแผนภูมิและฝังลงในหน้าเว็บของเราด้วยโค้ด HTML ต่อไปนี้:

 <div>drill-down chart will load here</div>

ตอนนี้ เราสามารถเลือกได้โดยใช้ตัวเลือก $ ของ jQuery ภายในโค้ด:

 $("#drill-down-chart")

หมายเหตุ: หากคุณมีแผนภูมิมากกว่าหนึ่งรายการในหน้าของคุณ คุณจะต้องมีคอนเทนเนอร์แยกต่างหากสำหรับแต่ละแผนภูมิที่มี id ที่ไม่ซ้ำกัน

การแสดงข้อมูลทำให้อ่านง่ายขึ้น

ขั้นตอนที่ 2: การรับและจัดโครงสร้างข้อมูล

FusionCharts ยอมรับข้อมูลทั้งในรูปแบบ JSON และ XML แต่ฉันเลือกใช้ JSON เนื่องจากกลายเป็นรูปแบบมาตรฐานสำหรับการแลกเปลี่ยนข้อมูลระหว่างเว็บแอป อาร์เรย์ข้อมูล JSON สำหรับแผนภูมิพื้นฐานมีออบเจ็กต์สำหรับพล็อตข้อมูลแต่ละรายการ และภายในออบเจ็กต์การลงจุดข้อมูลแต่ละรายการ เราจะกำหนดป้ายกำกับและค่าตามลำดับ โครงสร้างนั้นดูเหมือนว่า:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

ขณะที่เราพล็อตแผนภูมิเจาะลึก JSON ของมันมีความซับซ้อนมากขึ้น ลิงก์ระหว่างแผนภูมิหลักและแผนภูมิย่อยต้องมีคู่ key - value มากกว่าหนึ่งคู่ภายในแต่ละออบเจ็กต์ของอาร์เรย์ข้อมูล คีย์ใหม่ (เรียกว่า link อย่างแปลกใจ) จะมี id ของแผนภูมิลูกที่คุณจะได้รับเมื่อคลิกพล็อตข้อมูลพาเรนต์ รูปแบบสำหรับการกำหนด id แผนภูมิย่อยคือ newchart-dataFormat-childId เนื่องจากเราใช้ JSON เราจึงทราบดีว่าทุกสิ่งที่เราลิงก์จะมีลักษณะเหมือน newchart-json-childId นี่คือวิธีที่เรากำหนดให้กับแผนภูมิของเรา:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

ขั้นตอนที่ 3: การแทรกข้อมูลแผนภูมิ

เมื่อคุณมีข้อมูลพร้อมแล้ว ก็ถึงเวลาแทรกแผนภูมิบนหน้าเว็บของคุณโดยใช้เมธอด insertFusionCharts ที่จัดเตรียมโดยปลั๊กอิน jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

มาแยกย่อยข้อมูลโค้ดด้านบนกัน:

  • type กำหนดประเภทของแผนภูมิหลักที่เรากำลังวางแผน ในกรณีนี้คือ column2d ทุกแผนภูมิในไลบรารี FusionCharts มีนามแฝงที่ไม่ซ้ำกัน คุณสามารถค้นหานามแฝงสำหรับแผนภูมิที่คุณต้องการลงจุดได้ในหน้ารายการแผนภูมิของ FusionCharts
  • id ตั้งค่า id เฉพาะสำหรับแผนภูมิ เพื่อไม่ให้สับสนกับ id ขององค์ประกอบ <div> ที่มีแผนภูมิของเรา id ของแผนภูมิใช้เพื่อเลือกแผนภูมิสำหรับการใช้ตัวจัดการเหตุการณ์และวิธีการโทร เราจะใช้ประโยชน์จากสิ่งนี้ในขั้นตอนที่ 5
  • width และ height กำหนดขนาดของแผนภูมิเป็นพิกเซลหรือเปอร์เซ็นต์ ความกว้าง 100% บอกให้แผนภูมิใช้ความกว้างของคอนเทนเนอร์ทั้งหมด
  • เรากำหนดรูปแบบข้อมูลโดยใช้แอตทริบิวต์ dataFormat เรากำลังใช้ JSON สำหรับตัวอย่างของเรา แต่ก็มีรูปแบบข้อมูลอื่นๆ ที่ยอมรับได้เช่นกัน เช่น XML URL หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบข้อมูล โปรดดูหน้าเอกสารประกอบอย่างเป็นทางการของ FusionCharts
  • dataSource มีเนื้อหาจริงของแผนภูมิ และอ็อบเจ็กต์ chart ภายในประกอบด้วยตัวเลือกการกำหนดค่าของแผนภูมิ เช่น คำอธิบายภาพและคำอธิบายย่อย อาร์เรย์ data ควรดูคุ้นเคยเนื่องจากเราสร้างไว้ในขั้นตอนที่ 2 (ประกอบด้วยข้อมูลที่จะลงจุด) และ linkedData มีเนื้อหาสำหรับแผนภูมิย่อย (แผนภูมิที่คุณได้รับหลังจากที่คุณคลิกการลงจุดข้อมูลบนแผนภูมิหลัก)
ที่เกี่ยวข้อง: จ้าง 3% อันดับแรกของสถาปนิก Big Data อิสระ

ขั้นตอนที่ 4: การสร้างอาร์เรย์ข้อมูลที่เชื่อมโยงสำหรับแผนภูมิย่อย

ตอนนี้เราได้กำหนดแผนภูมิหลักแล้ว ก็ถึงเวลาสร้างแผนภูมิย่อยสำหรับแต่ละพล็อตข้อมูล ซึ่งเป็นกระบวนการที่คล้ายกับการสร้างแผนภูมิหลักมาก อาร์เรย์ linkedData ที่สร้างขึ้นในเมธอด 'insertFusionCharts' จะกำหนดออบเจ็กต์แยกกันสำหรับแผนภูมิย่อยแต่ละรายการ นี่คือลักษณะของข้อมูลสำหรับแผนภูมิย่อยรายการแรก:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id คือ id ของแผนภูมิย่อยแต่ละรายการที่เรากำหนดไว้ในขั้นตอนที่ 2 linkedChart คล้ายกับ dataSource จากขั้นตอนที่ 3 โดยมีเนื้อหาจริงของแผนภูมินั้น มีแอตทริบิวต์อื่นๆ มากมายที่อยู่ในออบเจ็กต์แผนภูมิ ซึ่งฉันจะกล่าวถึงในรายละเอียดในส่วนถัดไป "การปรับปรุงการออกแบบด้วยแอตทริบิวต์ของแผนภูมิ"

ขั้นตอนที่ 5: การกำหนดค่าการเจาะลึกแบบกำหนดเอง

ประเภทแผนภูมิที่หลากหลาย

จนถึงตอนนี้ โค้ดตัวอย่างของเรามีทั้งแผนภูมิหลักและแผนภูมิย่อยที่แชร์แผนภูมิประเภทเดียวกัน หากคุณต้องการเจาะลึกไปยังแผนภูมิประเภทอื่น (เช่น จากคอลัมน์หนึ่งไปยังอีกแผนภูมิวงกลม) ให้ดำเนินการโดยการผูกเหตุการณ์ fusionchartsrendered

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

ในโค้ดด้านบน เหตุการณ์ fusionchartsrendered จะเรียกเมธอด configureLink ซึ่งกำหนดประเภทของแผนภูมิย่อยทั้งหมดรวมถึงตัวเลือกปุ่มโอเวอร์เลย์ คุณยังสามารถระบุประเภทแผนภูมิแยกกันสำหรับแผนภูมิย่อยแต่ละรายการ มีตัวเลือกมากมายในวิธี configureLink ดังนั้นคุณอาจพบว่ามีประโยชน์ในการตรวจสอบเอกสารอ้างอิง API จาก FusionCharts

การแสดงผลแผนภูมิใน Divs ต่างๆ

สิ่งดีๆ อีกประการหนึ่งที่คุณสามารถทำได้คือแสดงแผนภูมิย่อยในคอนเทนเนอร์อื่น แทนที่จะแสดงแผนภูมิเดียวกันกับพาเรนต์ สำหรับสิ่งนี้ ให้กำหนดคอนเทนเนอร์ HTML <div> แยกต่างหากหลังจากคอนเทนเนอร์แผนภูมิหลัก และส่ง id ไปยังแอตทริบิวต์ renderAt ดังที่แสดงด้านล่าง:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

ค่าที่กำหนดให้กับแอตทริบิวต์ renderAt ระบุ id ของ <div> ซึ่งแผนภูมิย่อยจะแสดงผล ( chart-container2 )

ปรับปรุงการออกแบบด้วยคุณสมบัติของแผนภูมิ

ทำตามบทช่วยสอนนี้ คุณจะได้แผนภูมิที่ใช้งานได้ แต่จะค่อนข้างน่าเกลียดหากคุณปล่อยไว้อย่างนั้น เพื่อการนำเสนอที่น่าดึงดูดยิ่งขึ้น คุณจะต้องใช้ประโยชน์จาก “แอตทริบิวต์ของแผนภูมิ” ที่เป็นเครื่องสำอาง แอตทริบิวต์ของแผนภูมิถูกกำหนดไว้ภายในวัตถุ chart และใช้เพื่อกำหนดตัวเลือกการแสดงผลเอง คุณอาจพบว่ามีประโยชน์ในการอ้างถึงกราฟิกอธิบาย FusionCharts เมื่อตรวจสอบแอตทริบิวต์ที่กำหนดค่าได้ที่สำคัญเหล่านี้:

  • paletteColors สีกำหนดสีของแปลงข้อมูล หากคุณระบุสีเดียวที่นี่ คอลัมน์ทั้งหมดจะเป็นสีนั้น หากคุณระบุหลายสี คอลัมน์แรกจะใช้ค่าแรก คอลัมน์ที่สองจะใช้ค่าที่สอง และอื่นๆ
  • plotSpacePercent ควบคุมช่องว่างระหว่างคอลัมน์ ค่าเริ่มต้นสำหรับสิ่งนี้คือ 20 (ค่าเป็น int แต่หน่วยเป็นเปอร์เซ็นต์) และช่วงที่อนุญาตคือ 0-80 ค่าศูนย์จะทำให้คอลัมน์มัดรวมกันและติดกัน
  • baseFont กำหนดตระกูลแบบอักษรของแผนภูมิ คุณสามารถใช้แบบอักษรใดก็ได้ที่คุณชอบ ฉันใช้ Open Sans ของ Google ในแผนภูมิของฉัน เพียงใส่ไฟล์ฟอนต์ภายนอกในหน้า HTML เพื่อใช้ในแผนภูมิของคุณ
  • plotToolText ให้คุณปรับแต่งคำแนะนำเครื่องมือ ด้วยการใช้มาโครเช่น $label และ * $dataValue คุณสามารถแสดงข้อมูลเฉพาะบนพล็อตข้อมูลเฉพาะจากภายใน <div> จากนั้นจัดรูปแบบที่ <div> โดยใช้ CSS แบบอินไลน์ นี่คือสิ่งที่ฉันได้ทำในตัวอย่างของเรา:
 "plotToolText": "<div>$label: $dataValue</div>"
  • theme ช่วยให้คุณสามารถกำหนดแอตทริบิวต์แผนภูมิของคุณในไฟล์อื่นและนำไปใช้ที่นี่ แทนที่จะทำให้วัตถุแผนภูมิของคุณยุ่งเหยิงด้วยแอตทริบิวต์แผนภูมิจำนวนมาก คุณสามารถค้นหาไฟล์ธีมสำหรับบทช่วยสอนนี้ - toptal.js - ภายในโฟลเดอร์ JS ของ GitHub repo ของโปรเจ็กต์

นั่นคือทั้งหมดที่ฉันจะกล่าวถึง แต่มีแอตทริบิวต์มากกว่าหนึ่งร้อยรายการสำหรับแผนภูมิ ดังนั้นหากคุณต้องการสำรวจเพิ่มเติม โปรดไปที่หน้าแอตทริบิวต์แผนภูมิของ FusionCharts และค้นหาประเภทแผนภูมิเฉพาะของคุณ

แหล่งข้อมูล FusionCharts และ jQuery เพิ่มเติม

แม้ว่าฉันได้ครอบคลุมองค์ประกอบที่สำคัญที่สุดในการสร้างแผนภูมิเจาะลึกโดยใช้ jQuery แล้ว แต่ก็มีโอกาสดีที่คุณจะต้องการความช่วยเหลือเมื่อคุณพยายามทำด้วยตัวเอง สำหรับช่วงเวลานั้น ต่อไปนี้คือแหล่งข้อมูลเพิ่มเติม:

  • ปลั๊กอินแผนภูมิ jQuery: หากต้องการแรงบันดาลใจ โปรดไปที่หน้าปลั๊กอินแผนภูมิ jQuery อย่างเป็นทางการเพื่อดูตัวอย่างสด
  • เอกสารประกอบ: หากคุณคิดไม่ออก เอกสารเป็นที่แรกที่คุณควรดู นี่คือลิงก์ที่มีประโยชน์สำหรับปลั๊กอิน jQuery และแผนภูมิเจาะลึก (หรือที่เรียกว่าแผนภูมิที่เชื่อมโยง)
  • การสาธิต: ห้องสมุดแผนภูมิทุกแห่งมีตัวอย่างสดเพื่อแสดงความสามารถของมัน และ FusionCharts ก็ไม่ต่างกัน ไปที่แกลเลอรีตัวอย่างที่มีตัวอย่างสดมากกว่า 800 รายการ พร้อมซอร์สโค้ดแบบเต็มหากคุณต้องการแนวคิด มีโอกาสดีที่สิ่งที่คุณพยายามจะทำให้มีอยู่แล้ว ไม่จำเป็นต้องเริ่มต้นจากศูนย์ แค่แยกซอแล้วไปต่อจากที่นั่น!
  • ส่วนขยายเพิ่มเติม: หากคุณไม่ได้ใช้ vanilla JavaScript หรือ jQuery คุณสามารถสำรวจปลั๊กอินและ Wrapper เพิ่มเติมที่ FusionCharts นำเสนอในหน้านี้ พวกเขามีปลั๊กอินเฉพาะสำหรับไลบรารีและเฟรมเวิร์กต่างๆ เช่น Angular, React, Java, ASP.NET เป็นต้น

PS: ฉันจะออกไปเที่ยวในส่วนความคิดเห็นด้านล่าง ดังนั้นอย่าลังเลที่จะโพสต์คำถามใดๆ ที่คุณอาจมีเกี่ยวกับบทความของฉัน เรายินดีที่จะช่วยเหลือ!

ที่เกี่ยวข้อง: การขุดข้อมูลสำหรับการวิเคราะห์เครือข่ายโซเชียลเชิงทำนาย