তাই এতে অবাক হওয়ার কিছু নেই যে আপনাকে একটি নির্দিষ্ট প্লটলি ফিগারকে একটি HTML স্ট্রিং-এ রূপান্তর করতে হতে পারে।
এই টিউটোরিয়ালে, আমরা শিখব কিভাবে Plotly io মডিউল ব্যবহার করে একটি চিত্রকে HTML স্ট্রিং উপস্থাপনায় রূপান্তর করতে হয়।
এর মধ্যে ডুব দেওয়া যাক।
Plotly.io.to_html() ফাংশন
Plotly's io মডিউল থেকে to_html() ফাংশন আপনাকে প্যারামিটার হিসাবে একটি নির্দিষ্ট চিত্র পাস করতে এবং এটিকে একটি HTML স্ট্রিংয়ে রূপান্তর করতে দেয়।
ফাংশন সিনট্যাক্স নীচে দেখানো হিসাবে প্রকাশ করা হয়:
চক্রান্তে এই . to_html ( ডুমুর , কনফিগারেশন = কোনোটিই নয় , স্বয়ংক্রিয় চালু = সত্য , অন্তর্ভুক্ত_প্লটলিজ = সত্য , অন্তর্ভুক্ত_ম্যাথজ্যাক্স = মিথ্যা , পোস্ট_স্ক্রিপ্ট = কোনোটিই নয় , full_html = সত্য , animation_opts = কোনোটিই নয় , default_width = '100%' , ডিফল্ট_উচ্চতা = '100%' , যাচাই করা = সত্য , div_id = কোনোটিই নয় )
আসুন আমরা নীচের ফাংশন প্যারামিটারগুলি অন্বেষণ করি:
- ডুমুর - চিত্রের বস্তু বা চিত্রের অভিধান উপস্থাপনা বোঝায়।
- কনফিগারেশন - plotly.js কনফিগারেশন বিকল্পগুলি নির্দিষ্ট করে। একটি অভিধান হিসাবে কনফিগারেশন বিকল্প পাস করুন.
- অটো_প্লে - পৃষ্ঠা লোডে অ্যানিমেশন সিকোয়েন্স স্বয়ংক্রিয়ভাবে চালানো উচিত কিনা তা নির্ধারণ করে। আপনার যদি অ্যানিমেটেড ফ্রেম সমন্বিত একটি চিত্র থাকে তবে এই প্যারামিটারটি কার্যকর।
- Include_plotlyjs – এই প্যারামিটারটি নির্দিষ্ট করে কিভাবে plotly.js লাইব্রেরি HTML-এ অন্তর্ভুক্ত করা হয়। এই প্যারামিটারে গৃহীত মানগুলির মধ্যে রয়েছে:
- সত্য - HTML ডকুমেন্টে একটি স্ক্রিপ্ট ট্যাগ হিসাবে plotly.js লাইব্রেরি অন্তর্ভুক্ত করে। এটি ফাইলের আকার বাড়াবে কিন্তু ফাইলটিকে অফলাইন পরিবেশে ব্যবহার করার অনুমতি দেবে।
- 'cdn' - Include_plotlyjs প্যারামিটারকে 'cdn'-এ সেট করলে plotly.js লাইব্রেরির জন্য একটি দূরবর্তী লিঙ্কের দিকে নির্দেশ করে একটি স্ক্রিপ্ট ট্যাগ যুক্ত হবে। একটি নেটওয়ার্ক পরিবেশ বা ফাইল আকার-সংবেদনশীল পরিবেশে এই বিকল্পটি ব্যবহার করুন।
- 'ডিরেক্টরি' - একটি স্ক্রিপ্ট ট্যাগ অন্তর্ভুক্ত করে যা HTML ডকুমেন্টের মতো একই ডিরেক্টরিতে অবস্থিত একটি বহিরাগত plotly.min.js বান্ডেলকে নির্দেশ করে।
- 'require' - প্রয়োজন অনুযায়ী মান নির্ধারণ করলে require.js ব্যবহার করে plotly.js লাইব্রেরি লোড হবে। নিশ্চিত করুন যে need.js ইনস্টল করা আছে এবং সিস্টেমে বিশ্বব্যাপী উপলব্ধ।
- 'False' - plotly.js লাইব্রেরি অন্তর্ভুক্ত করে না। full_html প্যারামিটারটিকে True-এ সেট করার সময় এই মানটি এড়িয়ে চলুন কারণ এটি সম্পূর্ণ নথি রেন্ডার করবে, অব্যবহারযোগ্য।
- Include_mathjax – ফাইলটিতে mathjax.js লাইব্রেরি অন্তর্ভুক্ত করা উচিত কিনা তা নির্দিষ্ট করে। 'প্রয়োজনীয়' মান ব্যতীত গৃহীত মানগুলি অন্তর্ভুক্ত_প্লটলিজের অনুরূপ।
- পোস্ট_স্ক্রিপ্ট - আপনাকে জাভাস্ক্রিপ্ট স্নিপেটগুলি অন্তর্ভুক্ত করতে দেয় যা প্লট তৈরির পরে কার্যকর করা হয়।
- Full_html – সত্য হলে, ফাংশনটি ট্যাগ দিয়ে শুরু করে সমগ্র HTML নথি সম্বলিত একটি স্ট্রিং প্রদান করবে। মিথ্যা হলে, ফাংশনটি উপাদান দিয়ে শুরু করে একটি HTML স্ট্রিং প্রদান করবে।
- Animation_opts - আপনাকে একটি অভিধান হিসাবে কাস্টম অ্যানিমেশন বৈশিষ্ট্য নির্দিষ্ট করতে দেয়। এই মানগুলি তারপর plotly.js-এ plotly.animate ফাংশনে পাস করা হয়।
- Default_width - পিক্সেলে ফলস্বরূপ চিত্রটির ডিফল্ট প্রস্থ নির্দিষ্ট করে।
- ডিফল্ট_উচ্চতা - পিক্সেলে চিত্রের ডিফল্ট উচ্চতা নির্দিষ্ট করে।
- যাচাই করুন - একটি এইচটিএমএল স্ট্রিং এ রূপান্তর করার আগে চিত্রটি যাচাই করা উচিত কিনা তা নির্ধারণ করে।
- Div_id – div ট্যাগের আইডি অ্যাট্রিবিউটের একটি মান উল্লেখ করে যেখানে প্লটটি অবস্থিত।
তারপর, ফাংশন একটি স্ট্রিং হিসাবে চিত্রের একটি স্ট্রিং উপস্থাপনা প্রদান করে।
উদাহরণ ব্যবহার
নিম্নলিখিত কোডটি দেখায় কিভাবে to_html ফাংশন ব্যবহার করে একটি চিত্রকে একটি HTML স্ট্রিং উপস্থাপনায় রূপান্তর করতে হয়।
আমদানি চক্রান্তে প্রকাশ করা হিসাবে px
df = px তথ্য . স্টক ( সূচিত = সত্য )
ডুমুর = px এলাকা ( df , facet_col = 'প্রতিষ্ঠান' , facet_col_wrap = দুই )
ডুমুর দেখান ( )উপরের উদাহরণে, আমরা px হিসাবে Plotly এক্সপ্রেস মডিউল আমদানি করে শুরু করি। আমরা তারপর Plotly থেকে স্টক ডেটা ব্যবহার করে একটি ডেটা ফ্রেম তৈরি করি।
অবশেষে, আমরা px.area ফাংশন ব্যবহার করে একটি ফ্যাসেটেড এরিয়া প্লট তৈরি করি। এটি নীচে দেখানো হিসাবে একটি চিত্র ফেরত দেওয়া উচিত:
আমরা উপরের চিত্রটিকে একটি HTML স্ট্রিং উপস্থাপনায় রূপান্তর করতে পারি যা নীচের কোডে দেখানো হয়েছে:
আমদানি চক্রান্তে এই হিসাবে এই
এই. to_html ( ডুমুর , full_html = মিথ্যা )উপরের কোডটি চালানো হলে নীচের স্ক্রিনশটে দেখানো হিসাবে একটি বিশাল HTML স্ট্রিং ফিরে আসবে:
মনে রাখবেন যে HTML ডকুমেন্টটি
এলিমেন্ট থেকে শুরু হয়। আপনি যদি সম্পূর্ণ HTML ফাইলটি অন্তর্ভুক্ত করতে চান, তাহলে প্যারামিটারটি সেট করুন full_html=True যেমন দেখানো হয়েছে: আমদানি চক্রান্তে এই হিসাবে এই
এই. to_html ( ডুমুর , full_html = সত্য )
লক্ষ্য করুন মার্কআপটি ট্যাগে শুরু হয়।
plotly.js অন্তর্ভুক্ত করার জন্য, আমরা প্যারামিটারটি এইভাবে সেট করতে পারি:
আমদানি চক্রান্তে এই হিসাবে এই
এই. to_html ( ডুমুর , অন্তর্ভুক্ত_প্লটলিজ = 'সিডিএন' , full_html = সত্য )উপরের উদাহরণে, আমরা ফাংশনটিকে একটি CDN লিঙ্কের মাধ্যমে plotly.js লাইব্রেরি অন্তর্ভুক্ত করতে বলি।
আমরা নীচের আউটপুট থেকে এটি যাচাই করতে পারি:
to_html নথিটি ব্যবহার করার সর্বোত্তম উপায় হল একটি HTML ফাইলে HTML স্ট্রিং রপ্তানি করা।
আমরা নীচে দেখানো হিসাবে একটি সাধারণ কোড চালানোর মাধ্যমে এটি করতে পারি:
আমদানি চক্রান্তে এই হিসাবে এই
সঙ্গে খোলা ( 'facetted.html' , 'ভিতরে' ) হিসাবে চ:
চ লেখার লাইন ( এই. to_html ( ডুমুর , অন্তর্ভুক্ত_প্লটলিজ = 'cnd' , full_html = সত্য ) )এই উদাহরণে, আমরা পাইথনের ফাইল মডিউল ব্যবহার করে এইচটিএমএল স্ট্রিংকে একটি এইচটিএমএল ফাইল হিসাবে লিখি।
তারপরে আমরা ব্রাউজারে এইচটিএমএল ডকুমেন্ট খুলতে পারি এবং দেখানো চিত্রটি দেখতে পারি:
উপসংহার
অভিনন্দন, আপনি plotly.io.to_html ফাংশন ব্যবহার করে সফলভাবে আপনার Plotly চিত্রটিকে একটি HTML স্ট্রিং হিসাবে রপ্তানি করেছেন।