NPM
Bạn có thể cài đặt Plotly.js từ NPM qua
0 hoặc
1Plotly.js CDN
Bạn cũng có thể sử dụng liên kết Ultrafast Plotly.js CDN. CDN này được cung cấp một cách ân cần bởi đội ngũ đáng kinh ngạc tại Fastly.
Tải xuống
Tải xuống Minified Plotly.JS Mã nguồn và phụ thuộc.
Bao gồm các tập lệnh đã tải xuống trước khi kết thúc thẻ trong tài liệu HTML của bạn:
Tải xuống & nbsp; Plotly.js
Bắt đầu âm mưu!
Trong tài liệu HTML của bạn, hãy tạo một div trống để vẽ biểu đồ trong:
Bây giờ bạn có thể thực hiện các biểu đồ Potionly.js tương tác bằng cách sử dụng
2.
TESTER = document.getElementById['tester'];
Plotly.newPlot[ TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } ];
Bây giờ bạn có thể vượt qua Plotly.
Người dùng webpack?
Để Plotly.js xây dựng với WebPack, bạn sẽ cần cài đặt + và thêm nó vào
4 của bạn. Điều này bổ sung khả năng tương thích biến đổi của Browserify vào webpack cần thiết cho một số phụ thuộc Plotly.js.Một repo thể hiện cách xây dựng Plotly.js với webpack có thể được tìm thấy ở đây. Tóm lại, hãy thêm
5 vào phần
6 trong
7 của bạn:
...
module: {
rules: [
{
test: /\.js$/,
loader: 'ify-loader'
}
]
},
...
Xin chào thế giới ví dụ
Bảng cơ bản
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]
var data = [{
type: 'table',
header: {
values: [["EXPENSES"], ["Q1"],
["Q2"], ["Q3"], ["Q4"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: "grey"},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: "center",
line: {color: "black", width: 1},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]
Plotly.newPlot['myDiv', data];
Bảng kiểu dáng
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]
var data = [{
type: 'table',
header: {
values: [["EXPENSES"], ["Q1"],
["Q2"], ["Q3"], ["Q4"]],
align: ["left", "center"],
line: {width: 1, color: '#506784'},
fill: {color: '#119DFF'},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: ["left", "center"],
line: {color: "#506784", width: 1},
fill: {color: ['#25FEFD', 'white']},
font: {family: "Arial", size: 11, color: ["#506784"]}
}
}]
Plotly.newPlot['myDiv', data];
Bảng từ CSV
d3.csv["//raw.githubusercontent.com/plotly/datasets/master/Mining-BTC-180.csv", function[err, rows]{
function unpack[rows, key] {
return rows.map[function[row] { return row[key]; }];
}
var headerNames = d3.keys[rows[0]];
var headerValues = [];
var cellValues = [];
for [i = 0; i < headerNames.length; i++] {
headerValue = [headerNames[i]];
headerValues[i] = headerValue;
cellValue = unpack[rows, headerNames[i]];
cellValues[i] = cellValue;
}
// clean date
for [i = 0; i < cellValues[1].length; i++] {
var dateValue = cellValues[1][i].split[' '][0]
cellValues[1][i] = dateValue
}
var data = [{
type: 'table',
columnwidth: [150,600,1000,900,600,500,1000,1000,1000],
columnorder: [0,1,2,3,4,5,6,7,8,9],
header: {
values: headerValues,
align: "center",
line: {width: 1, color: 'rgb[50, 50, 50]'},
fill: {color: ['rgb[235, 100, 230]']},
font: {family: "Arial", size: 8, color: "white"}
},
cells: {
values: cellValues,
align: ["center", "center"],
line: {color: "black", width: 1},
fill: {color: ['rgba[228, 222, 249, 0.65]','rgb[235, 193, 238]', 'rgba[228, 222, 249, 0.65]']},
font: {family: "Arial", size: 9, color: ["black"]}
}
}]
var layout = {
title: "Bitcoin mining stats for 180 days"
}
Plotly.newPlot['myDiv', data, layout];
}];
Thay đổi kích thước của hàng và cột
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL
EXPENSES'],
["Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
"Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
"Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
"Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
"Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad"]]
var data = [{
type: 'table',
columnorder: [1,2],
columnwidth: [80,400],
header: {
values: [["EXPENSES
as of July 2017"], ["DESCRIPTION"]],
align: ["left", "center"],
height: 40,
line: {width: 1, color: '#506784'},
fill: {color: '#119DFF'},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: ["left", "center"],
height: 30,
line: {color: "#506784", width: 1},
fill: {color: ['#25FEFD', 'white']},
font: {family: "Arial", size: 11, color: ["#506784"]}
}
}]
Plotly.newPlot['myDiv', data];
Màu sắc hàng xen kẽ
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]
var headerColor = "grey";
var rowEvenColor = "lightgrey";
var rowOddColor = "white";
var data = [{
type: 'table',
header: {
values: [["EXPENSES"], ["Q1"],
["Q2"], ["Q3"], ["Q4"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: headerColor},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: "center",
line: {color: "black", width: 1},
fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
rowEvenColor,rowOddColor]]},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]
Plotly.newPlot['myDiv', data];