คำนำ
แผนภูมิทั้งหมดยกเว้นแผนภูมิวงกลมมีแกน x และแกน y โดยค่าเริ่มต้นแกน x จะแสดงที่ด้านล่างของแผนภูมิและแกน y จะแสดงทางด้านซ้าย (ด้วยแกน y หลายแกนสามารถแสดงทางด้านซ้ายและขวา) โดยการตั้ง chart.inverted = true ตำแหน่งการแสดงผล X-Y-Axis สามารถปรับได้
มาเรียนรู้แกนพิกัดของ Highcharts ด้วยกัน
Tags:
1. ชื่อ
xaxis: {title: {text: 'x-axis title'}} yaxis: {title: {text: 'y-axis title'}}}2. แท็ก
ป้ายกำกับ: เปิดใช้งาน, formatter, setp
yaxis: {labels: {enabled: true, formatter: function () {ถ้า (this.value <= 3) {return "ระดับแรก ("+this.value+")"; } อื่นถ้า (this.value> 3 && this.value <= 5) {return "ระดับที่สอง ("+this.value+")"; } else {return "ระดับที่สาม ("+this.value+")"; }}, ขั้นตอน: 1 // ค้นหาหลายบรรทัดที่จะแสดงครั้งเดียว}3. ตาข่าย
1. GridlineWidth
ความกว้างของเส้นกริด แกน x เริ่มต้นคือ 0 และแกน y เริ่มต้นคือ 1px
2. gridlinecolor
สีเส้นกริด ค่าเริ่มต้นคือ : #C0C0C0
3. gridlinedashstyle
รูปแบบเส้นเส้นกริด คล้ายกับสไตล์ชายแดน CSS ที่ใช้กันทั่วไปรวมถึง: ของแข็ง, dot และ dash
yaxis: {// gridlineWidth: '1px', // โปรดทราบว่าหากใช้คุณสมบัติ gridlinedashstyle นี้มันจะไม่ทำงาน gridlinecolor: '#019000', gridlinedashstyle: 'dash',}4. พิมพ์
xaxis: {หมวดหมู่: ['a', 'b', 'c']}, yaxis: {type: 'dateTime'},5. กลับมา
การผกผันคือการพลิกแกนแทน x และ y เพื่อปรับ ตัวอย่างเช่นผลลัพธ์ของการกลับด้านแกน y คือแกน y เริ่มต้นจากค่าที่ใหญ่ที่สุดและค่าต่ำสุดอยู่ด้านล่าง
xaxis: {หมวดหมู่: ['a', 'b', 'c'], ย้อนกลับ: true}, yaxis: {type: 'dateTime', กลับด้าน: จริง},6.opposite
เมื่อค่าของมันถูกตั้งค่าเป็นจริงตำแหน่งที่แสดงบนแกน x และแกน y จะขึ้นและลงและซ้ายและขวาตามลำดับ
xaxis: {หมวดหมู่: ['a', 'b', 'c'], ตรงข้าม: true}, yaxis: {type: 'dateTime', ตรงข้าม: true}7. ทันที
แผนภูมิ: {type: 'line', style: {fontsize: "17px",}, กลับหัว: true}8. นาทีสูงสุด
ควบคุมค่าต่ำสุดและสูงสุดของแกนตัวเลข
หมายเหตุ: การควบคุม Lowledecimals, Min, Max Properties คุณสามารถควบคุมช่วงการแสดงผลของแกนตัวเลขได้อย่างง่ายดาย ฯลฯ (นี่เป็นปัญหาที่พบบ่อยมาก)
สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ คุณได้เรียนรู้แล้วหรือยัง? ตัวแก้ไขจะยังคงอัปเดตบทความของ Highcharts ต่อไป เพื่อนที่สนใจ Highcharts ควรให้ความสนใจกับ wulin.com ต่อไป ฉันหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้