प्लॉटली.js
- स्वयं एक प्रयास करें पिछला पृष्ठ
- अगला पृष्ठ JS चार्ट
Plotly.js एक चित्राकारी लाइब्रेरी है जो 40 से अधिक चित्र क़िस्म, 3D चित्र, सांख्यिकी चित्र और SVG चित्र लाइब्रेरी सहित है。
स्पंदन चित्र
इक्वेशन दूसरा रंग
var xArray = [50,60,70,80,90,100,110,120,130,140,150]; var yArray = [7,8,8,9,9,9,10,11,14,14,15]; // डाटा वर्णन var data = [{ x: xArray, y: yArray, mode:"markers", type:"scatter" }]; // लेआउट वर्णन var layout = { xaxis: {range: [40, 160], title: "वर्गमीटर"}, yaxis: {range: [5, 16], title: "मूल्य (सौ लाख रुपये)"}, title: "घर की कीमत vs. सफाई" }; var layout = {title: "y = " + exp};
लकीर चित्र
इक्वेशन दूसरा रंग
var xArray = [50,60,70,80,90,100,110,120,130,140,150]; var yArray = [7,8,8,9,9,9,10,11,14,14,15]; // डाटा वर्णन var data = [{ x: xArray, y: yArray, mode: "lines", type: "scatter" }]; // लेआउट वर्णन var layout = { xaxis: {range: [40, 160], title: "वर्गमीटर"}, yaxis: {range: [5, 16], title: "मूल्य (सौ लाख रुपये)"}, title: "घर की कीमत vs. सफाई" }; } var layout = {title: "y = " + exp};
एकल रेखा चित्र
इक्वेशन दूसरा रंग
var exp = "x + 17"; var exp = "Math.sin(x)"; // मूल्य बनाया जाए var xValues = []; for (var x = 0; x <= 10; x += 1) { for (var x = 0; x <= 10; x += 0.1) { yValues.push(eval(exp)); xValues.push(x); // डाटा वर्णन var data = [{ x: xValues, y: yValues, mode: "lines" }]; // लेआउट वर्णन var data = [{x:xValues, y:yValues, mode:"lines"}]; } var layout = {title: "y = " + exp};
बहु-पंक्ति
इक्वेशन दूसरा रंग
var exp1 = "x"; var exp2 = "1.5*x"; var exp3 = "1.5*x + 7"; var exp = "Math.sin(x)"; var x1Values = []; var x2Values = []; var x3Values = []; var y1Values = []; var y2Values = []; var y3Values = []; for (var x = 0; x <= 10; x += 1) { x1Values.push(x); x2Values.push(x); x3Values.push(x); y1Values.push(eval(exp1)); y2Values.push(eval(exp2)); y3Values.push(eval(exp3)); xValues.push(x); // डाटा वर्णन var data = [ {x: x1Values, y: y1Values, mode:"lines"}, {x: x2Values, y: y2Values, mode:"lines"}, {x: x3Values, y: y3Values, mode:"lines"} ]; // लेआउट वर्णन var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"}; } var layout = {title: "y = " + exp};
बार चित्र
इक्वेशन दूसरा रंग
var xArray = ["इटली","फ्रांस","स्पेन","अमेरिका","अर्जेंटीना"]; var yArray = [55, 49, 44, 24, 15]; var data = [{ x: xArray, y: yArray, type: "bar" }]; var layout = {title:"विश्व शराब उत्पादन"}; var layout = {title: "y = " + exp};
स्थिति रेखाचित्र
इक्वेशन दूसरा रंग
var xArray = [55, 49, 44, 24, 15]; var yArray = ["इटली","फ्रांस","स्पेन","अमेरिका","अर्जेंटीना"]; var data = [{ x: xArray, y: yArray, type: "bar", orientation: "h" }]; var layout = {title:"विश्व शराब उत्पादन"}; var layout = {title: "y = " + exp};
पैनल चित्र
यदि आप पैनल चित्र को बार चित्र के बजाय दिखाना चाहते हैं, तो x और y को labels और values में बदलें और type को "pie" में बदलें:
var data = [{ labels: xArray, values: yArray, type: "pie" }];
甜甜圈图
如需显示甜甜圈而不是饼图,请添加一个 hole:
var data = [{ labels: xArray, values: yArray, hole: .4, type: "pie" }];
}
इक्वेशन दूसरा रंग
स्रोत कोड var exp = "Math.sin(x)"; // मूल्य बनाया जाए var xValues = []; var yValues = []; for (var x = 0; x <= 10; x += 0.1) { yValues.push(eval(exp)); xValues.push(x); } // Plotly के द्वारा दिखाया जाए var data = [{x:xValues, y:yValues, mode:"lines"}]; var layout = {title: "y = " + exp};
- स्वयं एक प्रयास करें पिछला पृष्ठ
- अगला पृष्ठ JS चार्ट