Plotly.js
Plotly.js là một thư viện đồ thị, có hơn 40 loại đồ thị, đồ thị 3D, đồ thị thống kê và đồ thị SVG.
hình đồ thị điểm rơi
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];
// Định nghĩa dữ liệu
var data = [{
x: xArray,
y: yArray,
mode:"markers",
type:"scatter"
}]
// Định nghĩa bố cục
var layout = {
xaxis: {range: [40, 160], title: "m2"},
yaxis: {range: [5, 16], title: "Giá (triệu đồng)"},
title: "Giá nhà vs. Diện tích"
};
Plotly.newPlot("myPlot", data, layout);
hình đồ thị đườ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];
// Định nghĩa dữ liệu
var data = [{
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
}]
// Định nghĩa bố cục
var layout = {
xaxis: {range: [40, 160], title: "m2"},
yaxis: {range: [5, 16], title: "Giá (triệu đồng)"},
title: "Giá nhà vs. Diện tích"
};
// Sử dụng Plotly để hiển thị
Plotly.newPlot("myPlot", data, layout);
hình đồ thị tuyến tính
Mã nguồn
var exp = "x + 17";
// Tạo giá trị
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Định nghĩa dữ liệu
var data = [{
x: xValues,
y: yValues,
mode: "lines"
}]
// Định nghĩa bố cục
var layout = {title: "y = " + exp};
// Sử dụng Plotly để hiển thị
Plotly.newPlot("myPlot", data, layout);
dòng nhiều dòng
Mã nguồn
var exp1 = "x";
var exp2 = "1.5*x";
var exp3 = "1.5*x + 7";
// Tạo giá trị
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));
}
// Định nghĩa dữ liệu
var data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
// Định nghĩa bố cục
var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
// Sử dụng Plotly để hiển thị
Plotly.newPlot("myPlot", data, layout);
Biểu đồ thanh
Mã nguồn
var xArray = ["Ý","Pháp","Tây Ban Nha","Mỹ","Argentina"];
var yArray = [55, 49, 44, 24, 15];
var data = [{
x: xArray,
y: yArray,
type: "bar" }];
var layout = {title:"Sản xuất rượu vang toàn cầu"};
Plotly.newPlot("myPlot", data, layout);
Biểu đồ thanh ngang
Mã nguồn
var xArray = [55, 49, 44, 24, 15];
var yArray = ["Ý","Pháp","Tây Ban Nha","Mỹ","Argentina"];
var data = [{
x: xArray,
y: yArray,
type: "bar",
orientation: "h"
}]
var layout = {title:"Sản xuất rượu vang toàn cầu"};
Plotly.newPlot("myPlot", data, layout);
Biểu đồ tròn
Nếu muốn hiển thị biểu đồ tròn thay vì biểu đồ thanh, hãy thay đổi x và y thành labels và values, và thay đổi type thành "pie":
var data = [{
labels: xArray,
values: yArray,
type: "pie"
}]
Biểu đồ bánh donut
Nếu muốn hiển thị bánh donut thay vì biểu đồ tròn, hãy thêm một hole:
var data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}]
Vẽ phương trình
Mã nguồn
var exp = "Math.sin(x)";
// Tạo giá trị
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Sử dụng Plotly để hiển thị
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
