รหัสการใช้งาน ichart.js สำหรับการวาดเส้นประและเอฟเฟกต์เส้นประที่หารด้วยค่าเฉลี่ย
var data = new Array (); ข้อมูล [0] = {ป้ายกำกับ: ["หน่วย 1", "ยูนิต 2", "ยูนิต 3", "ยูนิต 4", "ยูนิต 5"], ชุดข้อมูล: [{ชื่อ: 'อัตราความเป็นเลิศ', สี: '#1dbcfe', line_width: 4, ค่า: [80,75,92,62,0]}}}} 3 "," บทที่ 4 "," บทที่ 5 "], ชุดข้อมูล: [{ชื่อ: 'อัตราความเป็นเลิศ', สี: '#1dbcfe', line_width: 4, ค่า: [50,11,62,77,90]}]} data [2] = {labels:" หน่วย "หน่วย" 'อัตราความเป็นเลิศ', สี: '#1dbcfe', line_width: 4, ค่า: [80,51,32,44,80]}]} var _bodywidth = $ ('ร่างกาย'). ความกว้าง ()-16; $ ('. item'). แต่ละ (ฟังก์ชั่น (i) {var _id = $ (this) .find ('. canvas-wrap'). attr ('id'); var chart = ใหม่ ichart.linebasic2d ({render: _id, data: data [i] _BodyWidth*1.2, background_color: '#fafafa', ภาพเคลื่อนไหว: จริง, // เปิดการเปลี่ยนแปลงภาพเคลื่อนไหวแอนิเมชั่น emation_duration: 600, // 600ms เสร็จสิ้นการเคลื่อนไหว sub_option: {เรียบ: จริง, กลวง: false, hollow_inside: false, point_size ฉลาก: {fontsize: 24, สี: '#333'},}, พิกัด: {width: _bodywidth*1.6, valid_width: _bodywidth*1.4, ความสูง: _bodywidth*1.6*.5, striped_factor: 0.18 มาตราส่วน: [{ตำแหน่ง: 'ซ้าย', start_scale: 0, end_scale: 100, scale_space: 20, scale_size: 2, scale_enable: false, label: {color: '#999', fontsize: 24}, scale_color: '#999' FALSE, LABELS: DATA [I] .LABELS}]}}); $ .Each (data [i] .datasets [0] .Value, ฟังก์ชั่น (i, val) {_total+= val;}); coo.getScale ('ซ้าย'), h = coo.height, h = (avg - s.start) * h / s.distance, y = chart.y+h - h; Chart.Target.TextAlign ('Start') .TextBaseline ('Middle') .TextFont ('500 20PX Verdana') .FillText ('อัตราการชนะเฉลี่ย'+AVG+'%', X+W-100, Y-20, FALSE, '#FE941C');รหัสด้านบนเป็นตัวอย่างของ JS สำหรับการวาดแผนภูมิหลายบรรทัดและวิธีการวาดเส้นประเฉลี่ยภายในแต่ละแผนภูมิบรรทัด
ichart.js เป็นไอคอนที่ดีมากวาด JS ข้อเสียคือในด้านมือถือคุณต้องตั้งค่าขนาดสองเท่าก่อนจากนั้นแคบลงด้วยตนเองเป็นช่วงปกติด้วย CSS และ JS เพื่อให้มันมีความละเอียดสูงบนหน้าจอ
มีตัวอย่างของการวาดเส้นเฉลี่ยบนเว็บไซต์ทางการ แต่ไม่มีเส้นประ โดยทั่วไปเพื่อไม่ให้สับสนเส้นเฉลี่ยจะถูกวาดโดยใช้เส้นประ ที่นี่ฉันเพิ่งวนเพื่อวาดเส้นตรง N-end ซึ่งเป็นวิธีแก้ปัญหา หากมีวิธีที่ดีกว่าโปรดฝากข้อความไว้ ขอบคุณ
รหัสด้านบนสำหรับการวาดเส้นประและเส้นประที่แบ่งเท่า ๆ กันใน ichart.js เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น