Bootstrap เป็นชุดเครื่องมือส่วนหน้าที่พัฒนาโดยอดีตนักออกแบบ Twitter Mark Otto และ Jacob Thornton ซึ่งให้ข้อมูลจำเพาะ HTML และ CSS ที่สง่างาม Bootstrap ไม่ได้เป็นเพียงกรอบการทำงาน แต่เป็นการเปลี่ยนเกมทั้งหมด เฟรมเวิร์กนี้ทำให้การออกแบบและพัฒนาแอพพลิเคชั่นและเว็บไซต์จำนวนมากง่ายขึ้นมากและทำให้เฟรมเวิร์ก HTML เป็นจำนวนมากเป็นจำนวนมากในผลิตภัณฑ์
แผนภูมิส่วนประกอบแผนภูมิ js เป็นหนึ่งในองค์ประกอบที่มีประโยชน์มากกว่าของ bootstrap มันคล้ายกับ Highchart ส่วนประกอบที่ชำระเงิน ในแง่ของผลกระทบยังมีความแตกต่างเล็กน้อยระหว่างผลิตภัณฑ์ฟรีและแบบชำระเงิน แต่เกือบจะสามารถตอบสนองความต้องการของโครงการของเราในแง่ของการทำงาน สคริปต์ JS ต่อไปนี้ส่วนใหญ่เขียนขึ้นเพื่ออำนวยความสะดวกในการกำหนดค่าของแผนภูมิ
/*** รับรายการการกำหนดค่าแผนภูมิใหม่* @param color rgba color* @param ประเภทแผนภูมิประเภท: บรรทัด, แถบ, เรดาร์, โพลาเรีย, พาย, โดนัท* @param แสดงชื่อชื่อของแผนภูมิ* @param ฉลากของชาร์ต y-axis* @returns ส่งคืนพารามิเตอร์การกำหนดค่าของแผนภูมิ*/ฟังก์ชั่น getNewConfig (สี, ประเภท, ชื่อ, ฉลาก, หมวดหมู่, ข้อมูล) {var background = color; จริง, scaleLabel: {display: false, labelstring: 'month'}}], yaxes: [{display: true, scaleLabel: {display: false, labelstring: 'value'}}]}, ชื่อ: {display: true, text: title: talte: data พื้นหลัง, พื้นหลัง: พื้นหลัง, pointBorderColor: พื้นหลัง, pointBackgroundColor: พื้นหลัง, pointBorderWidth:}; var data = {ฉลาก: หมวดหมู่, ชุดข้อมูล: [ชุดข้อมูล]}; config.data = data; return config;}วิธีการโทร:
<canvas id = "chart_weixinmember"> </sanvas> var color = 'rgba (,,.)'; var categories = ["-", "-", "-", "-", "-", "-", "-"-"-"-"-"-" การเติบโตของสมาชิกในวันที่ผ่านมา ',' สมาชิก WeChat ใหม่เพิ่มวันนั้น ', หมวดหมู่, ข้อมูล); var ctx = document.getElementById ("chart_weixinmember"). getContext ("d");ผลกระทบที่แสดง:
หมายเหตุ: ใช้รหัสด้านบนเพื่ออ้างถึงแผนภูมิ.js
แผนภูมิเว็บไซต์และเอกสารประกอบของจีน:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
แผนภูมิเว็บไซต์และเอกสารประกอบภาษาอังกฤษ:
www.chartjs.org
www.chartjs.org/docs