Plotly.js
Plotly.js là một thư viện biểu đồ đi kèm với hơn 40 loại biểu đồ, biểu đồ 3D, biểu đồ thống kê và bản đồ SVG.
Điểm phân tán
Mã nguồn
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];
// Define Data
var data = [{
x: xArray,
y: yArray,
mode:"markers",
type:"scatter"
}];
// Define Layout
var layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
Plotly.newPlot("myPlot", data, layout);
Biểu đồ đường
Mã nguồn
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];
// Define Data
var data = [{
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
}];
// Define Layout
var layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Đồ thị tuyến tính
Mã nguồn
var exp = "x + 17";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Define Data
var data = [{
x: xValues,
y: yValues,
mode: "lines"
}];
// Define Layout
var layout = {title: "y = " + exp};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Nhiều dòng
Mã nguồn
var exp1 = "x";
var exp2 = "1.5*x";
var exp3 = "1.5*x + 7";
// Generate values
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));
}
// Define Data
var data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
// Define Layout
var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Biểu đồ thanh
Mã nguồn
var xArray = ["Italy","France","Spain","USA","Argentina"];
var yArray = [55, 49, 44, 24, 15];
var data = [{
x: xArray,
y: yArray,
type: "bar"
}];
var layout = {title:"World Wine Wine Production"};
Plotly.newPlot("myPlot", data, layout);
Biểu đồ thanh ngang
Mã nguồn
var xArray = [55, 49, 44, 24, 15];
var yArray = ["Italy","France","Spain","USA","Argentina"];
var data = [{
x: xArray,
y: yArray,
type: "bar",
orientation: "h"
}];
var layout = {title:"World Wine Wine Production"};
Plotly.newPlot("myPlot", data, layout);
Biểu đồ hình tròn
Để hiển thị một chiếc bánh thay vì các thanh, hãy thay đổi x và y thành nhãn và giá trị, đồng thời thay đổi loại thành "pie":
var data = [{
labels: xArray,
values: yArray,
type: "pie"
}];
Biểu đồ bánh rán
Để hiển thị một chiếc bánh rán thay vì một chiếc bánh, hãy thêm một lỗ:
var data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}];
Lập phương trình
Mã nguồn
var exp = "Math.sin(x)";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Display using Plotly
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);