Plotly.io.to_html

ดังนั้นจึงไม่น่าแปลกใจที่คุณอาจต้องแปลงตัวเลข Plotly ที่เฉพาะเจาะจงเป็นสตริง HTML

ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีใช้โมดูล Plotly io เพื่อแปลงร่างเป็นการแสดงสตริง HTML

มาดำดิ่งกัน

Plotly.io.to_html() ฟังก์ชั่น

ฟังก์ชัน to_html() จากโมดูล io ของ Plotly ช่วยให้คุณสามารถส่งผ่านตัวเลขเฉพาะเป็นพารามิเตอร์และแปลงเป็นสตริง HTML

ไวยากรณ์ของฟังก์ชันแสดงดังที่แสดงด้านล่าง:

ให้เราสำรวจพารามิเตอร์ของฟังก์ชันด้านล่าง:

1. รูป - หมายถึงวัตถุรูปหรือการแสดงพจนานุกรมของรูป
2. Config – ระบุตัวเลือกการกำหนดค่า plotly.js ส่งผ่านตัวเลือกการกำหนดค่าเป็นพจนานุกรม
3. Auto_play – กำหนดว่าลำดับภาพเคลื่อนไหวควรเล่นโดยอัตโนมัติในการโหลดหน้าเว็บหรือไม่ พารามิเตอร์นี้มีประโยชน์หากคุณมีฟิกเกอร์ที่มีเฟรมเคลื่อนไหว
4. Include_plotlyjs – พารามิเตอร์นี้ระบุว่าไลบรารี plotly.js รวมอยู่ใน HTML อย่างไร ค่าที่ยอมรับในพารามิเตอร์นี้รวมถึง:
   • จริง – รวมไลบรารี plotly.js เป็นแท็กสคริปต์ในเอกสาร HTML การทำเช่นนี้จะเพิ่มขนาดไฟล์ แต่จะอนุญาตให้ใช้ไฟล์ในสภาพแวดล้อมออฟไลน์
   • 'cdn' – การตั้งค่าพารามิเตอร์ include_plotlyjs เป็น 'cdn' จะเพิ่มแท็กสคริปต์ที่ชี้ไปยังลิงก์ระยะไกลสำหรับไลบรารี plotly.js ใช้ตัวเลือกนี้เมื่ออยู่ในสภาพแวดล้อมแบบเครือข่ายหรือสภาพแวดล้อมที่คำนึงถึงขนาดไฟล์
   • 'ไดเรกทอรี' - รวมแท็กสคริปต์ที่ชี้ไปยังบันเดิล plotly.min.js ภายนอกที่อยู่ในไดเร็กทอรีเดียวกันกับเอกสาร HTML
   • 'ต้องการ' - การตั้งค่าที่ต้องการจะโหลดไลบรารี plotly.js โดยใช้ require.js ตรวจสอบให้แน่ใจว่า require.js ได้รับการติดตั้งและพร้อมใช้งานทั่วโลกบนระบบ
   • ‘เท็จ’ – ไม่รวมไลบรารี plotly.js หลีกเลี่ยงค่านี้เมื่อตั้งค่าพารามิเตอร์ full_html เป็น True เนื่องจากจะทำให้ทั้งเอกสารใช้ไม่ได้
5. include_mathjax – ระบุว่าไฟล์ควรมีไลบรารี mathjax.js หรือไม่ ค่าที่ยอมรับจะคล้ายกับ include_plotlyjs ยกเว้นค่า 'require'
6. Post_script – อนุญาตให้คุณรวมข้อมูลโค้ด JavaScript ที่ดำเนินการหลังจากสร้างพล็อต
7. Full_html – ถ้าเป็นจริง ฟังก์ชันจะส่งคืนสตริงที่มีเอกสาร HTML ทั้งหมด เริ่มต้นด้วยแท็ก หากเป็นเท็จ ฟังก์ชันจะส่งคืนสตริง HTML ที่ขึ้นต้นด้วยองค์ประกอบ
8. Animation_opts – อนุญาตให้คุณระบุคุณสมบัติแอนิเมชั่นที่กำหนดเองเป็นพจนานุกรม ค่าเหล่านี้จะถูกส่งต่อไปยังฟังก์ชัน plotly.animate ใน plotly.js
9. Default_width – ระบุความกว้างเริ่มต้นของตัวเลขผลลัพธ์เป็นพิกเซล
10. Default_height – ระบุความสูงเริ่มต้นของตัวเลขเป็นพิกเซล
11. ตรวจสอบ - กำหนดว่าควรตรวจสอบตัวเลขก่อนแปลงเป็นสตริง HTML หรือไม่
12. Div_id – ระบุค่าของแอตทริบิวต์ id ของแท็ก div ที่พล็อตตั้งอยู่

จากนั้น ฟังก์ชันจะส่งกลับการแสดงสตริงของรูปเป็นสตริง

ตัวอย่างการใช้งาน

รหัสต่อไปนี้แสดงวิธีใช้ฟังก์ชัน to_html เพื่อแปลงร่างเป็นการแสดงสตริง HTML

ในตัวอย่างข้างต้น เราเริ่มต้นด้วยการนำเข้าโมดูล Plotly express เป็น px จากนั้นเราสร้าง data frame โดยใช้ข้อมูลหุ้นจาก Plotly

สุดท้าย เราสร้างพล็อตพื้นที่เหลี่ยมเพชรพลอยโดยใช้ฟังก์ชัน px.area สิ่งนี้ควรส่งคืนตัวเลขที่แสดงด้านล่าง:

เราสามารถแปลงตัวเลขด้านบนเป็นการแสดงสตริง HTML ตามที่แสดงในโค้ดด้านล่าง:

การเรียกใช้โค้ดด้านบนควรส่งคืนสตริง HTML ขนาดใหญ่ตามที่แสดงในภาพหน้าจอด้านล่าง:

โปรดทราบว่าเอกสาร HTML เริ่มต้นที่