Plotly.js

❮ Trước Kế tiếp ❯

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 các 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);

❮ Trước Kế tiếp ❯