Plotly.js
Plotly.js एक चित्रांकन लाइब्रेरी है, जिसमें 40 से अधिक चित्रांकन टाइप, 3D चित्र, सांख्यिकी चित्र और SVG चित्र शामिल हैं。
स्पर्शचित्र
स्रोत कोड
वार एक्सArray = [50,60,70,80,90,100,110,120,130,140,150];
वार यArray = [7,8,8,9,9,9,10,11,14,14,15];
// डाटा वर्णित करने के लिए
वार डाटा = [{
x: एक्सएरेरी,
y: यएसएरेरी,
मोड: "markers",
टाइप: "scatter"
}]
// लेआउट वर्णित करने के लिए
वार लेआउट = {
एक्सिस: {रेंज: [40, 160], शीर्षक: "वर्गमीटर"},
यएक्सिस: {रेंज: [5, 16], शीर्षक: "मूल्य (शतवानी)"},
शीर्षक: "घर की दर vs. क्षेत्रफल"
};
Plotly.newPlot("myPlot", data, layout);
फ़ोलियाम चित्र
स्रोत कोड
वार एक्सArray = [50,60,70,80,90,100,110,120,130,140,150];
वार यArray = [7,8,8,9,9,9,10,11,14,14,15];
// डाटा वर्णित करने के लिए
वार डाटा = [{
x: एक्सएरेरी,
y: यएसएरेरी,
मोड: "lines",
टाइप: "scatter"
}]
// लेआउट वर्णित करने के लिए
वार लेआउट = {
एक्सिस: {रेंज: [40, 160], शीर्षक: "वर्गमीटर"},
यएक्सिस: {रेंज: [5, 16], शीर्षक: "मूल्य (शतवानी)"},
शीर्षक: "घर की दर vs. क्षेत्रफल"
};
// प्लॉटअउएस के द्वारा प्रदर्शित करने के लिए
Plotly.newPlot("myPlot", data, layout);
श्रेणीचित्र
स्रोत कोड
वार एक्स्प = "x + 17";
// मान उत्पन्न करने के लिए
वार एक्सवैल्यूज = [];
वार यैल्वैल्यूज = [];
फ़ोर (वार एक्स = 0; एक्स <= 10; एक्स += 1) {
वैल्यूज.पूश(एक्सप्रेस्सियन);
एक्सवैल्यूज.पूश(एक्स);
}
// डाटा वर्णित करने के लिए
वार डाटा = [{
एक्स: एक्सValues,
य: यValues,
मोड: "lines"
}]
// लेआउट वर्णित करने के लिए
वार प्लेटअउएस के लिए लेआउट = { शीर्षक: "y = " + एक्सप्रेस्सियन };
// प्लॉटअउएस के द्वारा प्रदर्शित करने के लिए
Plotly.newPlot("myPlot", data, layout);
बहु-पद
स्रोत कोड
वार एक्स्प1 = "x";
वार एक्स्प2 = "1.5*x";
वार एक्स्प3 = "1.5*x + 7";
// मान उत्पन्न करने के लिए
वार एक्स1Values = [];
वार एक्स2Values = [];
वार एक्स3Values = [];
वार य1Values = [];
वार य2Values = [];
वार य3Values = [];
फ़ोर (वार एक्स = 0; एक्स <= 10; एक्स += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
य3वैल्यूज.पूश(एक्सप्रेस्सियन3));
}
// डाटा वर्णित करने के लिए
वार डाटा = [
{x: एक्स1वैल्यूज, y: य1वैल्यूज, मोड: "लाइन्स"},
{x: एक्स2वैल्यूज, y: य2वैल्यूज, मोड: "लाइन्स"},
{x: एक्स3वैल्यूज, y: य3वैल्यूज, मोड: "लाइन्स"}
];
// लेआउट वर्णित करने के लिए
वार लेआउट = { शीर्षक: "[y=" + एक्सप्रेस्सियन1 + "] [y=" + एक्सप्रेस्सियन2 + "] [y=" + एक्सप्रेस्सियन3 + "]"};
// प्लॉटअउएस के द्वारा प्रदर्शित करने के लिए
Plotly.newPlot("myPlot", data, layout);
बार चित्र
स्रोत कोड
वार एक्सएरेरी = ["इटली", "फ्रांस", "स्पेन", "अमेरिका", "अर्जेंटीना"];
वार यएसएरेरी = [55, 49, 44, 24, 15];
वार डाटा = [{
x: एक्सएरेरी,
y: यएसएरेरी,
टाइप: "बार" }];
वार लेआउट = { शीर्षक: "विश्व शराब उत्पादन"};
Plotly.newPlot("myPlot", data, layout);
स्थायी बार चित्र
स्रोत कोड
वार एक्सएरेरी = [55, 49, 44, 24, 15];
वार यएसएरेरी = ["इटली", "फ्रांस", "स्पेन", "अमेरिका", "अर्जेंटीना"];
वार डाटा = [{
x: एक्सएरेरी,
y: यएसएरेरी,
टाइप: "बार",
ओरिएंटेशन: "हरीज़ोंती",
}]
वार लेआउट = { शीर्षक: "विश्व शराब उत्पादन"};
Plotly.newPlot("myPlot", data, layout);
पाइ चित्र
अगर आप बार चित्र के बजाय पाइ चित्र प्रदर्शित करना चाहते हैं, तो x और y को labels और values में बदलें और टाइप को "पाइ" में बदलें:
वार डाटा = [{
लेबल्स: एक्सएरेरी,
वैल्यूज: यएसएरेरी,
टाइप: "पाइ"
}]
दॉनट चित्र
अगर आप दॉनट के बजाय पाइ चित्र प्रदर्शित करना चाहते हैं, तो एक होल जोड़ें:
वार डाटा = [{
लेबल्स: एक्सएरेरी,
वैल्यूज: यएसएरेरी,
होल: .4,
टाइप: "पाइ"
}]
समीकरण ड्रा करना
स्रोत कोड
वार एक्सप्रेस्सियन = "Math.sin(x)";
// मान उत्पन्न करने के लिए
वार एक्सवैल्यूज = [];
वार यैल्वैल्यूज = [];
फॉर(वार एक्स = 0; एक्स <= 10; एक्स += 0.1) {
वैल्यूज.पूश(एक्सप्रेस्सियन);
एक्सवैल्यूज.पूश(एक्स);
}
// प्लॉटअउएस के द्वारा प्रदर्शित करने के लिए
वार डाटा = [{x:एक्सवैल्यूज, y:वैल्यूज, मोड: "लाइन्स"}];
वार प्लेटअउएस के लिए लेआउट = { शीर्षक: "y = " + एक्सप्रेस्सियन };
Plotly.newPlot("myPlot", data, layout);
