可视化组件plotly.js绘制简单图表示例之散点图、折线图、柱形图和气泡图
scatter散点图 折线图
<div id="myDiv" style="width: 600px"></div>
<div id="myDiv1" style="width: 600px"></div>
<div id="myDiv2" style="width: 600px"></div>
<div id="myDiv3" style="width: 600px"></div>
<div id="myDiv4" style="width: 600px"></div>
<script src="../plugins/plotly.min.js"></script>
<script>
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: "markers+text",
type: "scatter",
name: "Team A",
text: ["A-1", "A-2", "A-3", "A-4", "A-5"],
textposition: "top center",
textfont: {
family: "Raleway, sans-serif",
},
marker: { size: 12 },
};
var trace2 = {
x: [1.5, 2.5, 3.5, 4.5, 5.5],
y: [4, 1, 7, 1, 4],
mode: "lines+markers+text",
type: "scatter",
name: "Team B",
text: ["B-a", "B-b", "B-c", "B-d", "B-e"],
textposition: "bottom center",
textfont: {
family: "Raleway, sans-serif",
},
marker: { size: 12 },
};
var data = [trace1, trace2];
var layout = {
xaxis: {
range: [0.75, 5.25],
},
yaxis: {
range: [0, 8],
},
title: "Data Labels Hover",
};
Plotly.newPlot("myDiv", data, layout);
</script>
<script>
var trace1 = {
x: ["South Korea", "China", "Canada"],
y: [24, 10, 9],
name: "Gold",
type: "scatter",
mode: "markers",
};
var trace2 = {
x: ["South Korea", "China", "Canada"],
y: [13, 15, 12],
name: "Silver",
type: "scatter",
mode: "markers",
};
var trace3 = {
x: ["South Korea", "China", "Canada"],
y: [11, 8, 12],
name: "Bronze",
type: "scatter",
mode: "markers",
};
var data = [trace1, trace2, trace3];
var layout = {
scattermode: "group",
title: "Grouped by Country",
xaxis: { title: "Country" },
yaxis: { title: "Medals" },
scattergap: 0.7,
};
Plotly.newPlot("myDiv1", data, layout);
</script>
<script>
var trace1 = {
y: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
mode: "markers",
marker: {
size: 10,
color: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39],
},
};
var data = [trace1];
var layout = {
title: "Scatter Plot with a Color Dimension",
};
Plotly.newPlot("myDiv2", data, layout);
</script>
<script>
function gaussianRand() {
var rand = 0;
for (var i = 0; i < 6; i += 1) {
rand += Math.random();
}
return rand / 6 - 0.5;
}
var X = [],
Y = [],
n = 1000000,
i;
for (i = 0; i < n; i += 1) {
X.push(gaussianRand());
Y.push(gaussianRand());
}
var data = [
{
type: "scattergl",
mode: "markers",
marker: {
line: {
width: 1,
color: "rgb(0,0,0)",
},
},
x: X,
y: Y,
},
];
Plotly.newPlot("myDiv3", data);
</script>
<script>
function gaussianRand() {
var rand = 0;
for (var i = 0; i < 6; i += 1) {
rand += Math.random();
}
return rand / 6 - 0.5;
}
var start_value = 0,
stop_value = 1,
point_num = 5000,
trace_num = 10;
var curr_value = start_value;
var step = (stop_value - start_value) / (point_num - 1);
var data = [];
for (var j = 0; j < trace_num; j++) {
var X = [],
Y = [];
for (var i = 0; i < point_num; i++) {
X.push(curr_value + step * i);
Y.push(gaussianRand() * 8 + j * 5);
}
data.push({
type: "scattergl",
mode: "line",
x: X,
y: Y,
});
}
var layout = { showlegend: false };
Plotly.newPlot("myDiv4", (data = data), (layout = layout));
</script>
scatter 散点图 折线图
<div id="myDiv" style="width: 600px"></div>
<div id="myDiv1" style="width: 600px"></div>
<div id="myDiv2" style="width: 600px"></div>
<div id="myDiv3" style="width: 600px"></div>
<div id="myDiv4" style="width: 600px"></div>
<script src="../plugins/d3.3.5.17.min.js"></script>
<script src="../plugins/plotly.min.js"></script>
<script>
var data = [
{
x: ["2015-02-01", "2015-02-02", "2015-02-03"],
y: [-14, -17, -8],
mode: "line",
name: "temperature",
},
];
var layout = {
shapes: [
{
type: "rect",
xref: "x",
yref: "paper",
x0: "2015-02-02",
y0: 0,
x1: "2015-02-02",
y1: 1,
fillcolor: "#d3d3d3",
opacity: 0.2,
line: {
width: 0,
},
},
],
};
Plotly.newPlot("myDiv", data, layout);
</script>
<script>
function normal_array(mean, stddev, size) {
var arr = new Array(size),
i;
var generator = (function () {
return d3.random.normal(mean, stddev);
})();
for (i = 0; i < arr.length; i++) {
arr[i] = generator();
}
return arr;
}
var x0 = normal_array(2, 0.45, 300);
var y0 = normal_array(2, 0.45, 300);
var x1 = normal_array(6, 0.4, 200);
var y1 = normal_array(6, 0.4, 200);
var x2 = normal_array(4, 0.3, 200);
var y2 = normal_array(4, 0.3, 200);
console.log(x0);
var data = [
{
x: x0,
y: y0,
mode: "markers",
},
{
x: x1,
y: y1,
mode: "markers",
},
{
x: x2,
y: y2,
mode: "markers",
},
{
x: x1,
y: y0,
mode: "markers",
},
];
var layout = {
shapes: [
{
type: "circle",
xref: "x",
yref: "y",
x0: d3.min(x0),
y0: d3.min(y0),
x1: d3.max(x0),
y1: d3.max(y0),
opacity: 0.2,
fillcolor: "blue",
line: {
color: "blue",
},
},
{
type: "circle",
xref: "x",
yref: "y",
x0: d3.min(x1),
y0: d3.min(y1),
x1: d3.max(x1),
y1: d3.max(y1),
opacity: 0.2,
fillcolor: "orange",
line: {
color: "orange",
},
},
{
type: "circle",
xref: "x",
yref: "y",
x0: d3.min(x2),
y0: d3.min(y2),
x1: d3.max(x2),
y1: d3.max(y2),
opacity: 0.2,
fillcolor: "green",
line: {
color: "green",
},
},
{
type: "circle",
xref: "x",
yref: "y",
x0: d3.min(x1),
y0: d3.min(y0),
x1: d3.max(x1),
y1: d3.max(y0),
opacity: 0.2,
fillcolor: "red",
line: {
color: "red",
},
},
],
showlegend: false,
};
Plotly.newPlot("myDiv1", data, layout);
</script>
<script>
var trace1 = {
x: [1.5, 3],
y: [2.5, 2.5],
text: ["Rectangle reference to the plot", "Rectangle reference to the axes"],
mode: "text",
};
var layout = {
title: "Rectangles Positioned Relative to the Plot and to the Axes",
xaxis: {
range: [0, 4],
showgrid: false,
},
yaxis: {
range: [0, 4],
},
shapes: [
{
type: "rect",
xref: "x",
yref: "y",
x0: 2.5,
y0: 0,
x1: 3.5,
y1: 2,
line: {
color: "rgb(55, 128, 191)",
width: 3,
},
fillcolor: "rgba(55, 128, 191, 0.6)",
},
{
type: "rect",
xref: "paper",
yref: "paper",
x0: 0.25,
y0: 0,
x1: 0.5,
y1: 0.5,
line: {
color: "rgb(50, 171, 96)",
width: 3,
},
fillcolor: "rgba(50, 171, 96, 0.6)",
},
],
};
var data = [trace1];
Plotly.newPlot("myDiv2", data, layout);
</script>
<script>
var trace1 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [10, 15, null, 17, 14, 12, 10, null, 15],
mode: "lines+markers",
connectgaps: true,
};
var trace2 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [16, null, 13, 10, 8, null, 11, 12],
mode: "lines",
connectgaps: true,
};
var data = [trace1, trace2];
var layout = {
title: "Connect the Gaps Between Data",
xaxis: {
range: [1, 8],
autorange: false,
},
yaxis: {
range: [8, 17],
autorange: false,
},
legend: {
y: 0.5,
traceorder: "reversed",
font: {
size: 16,
},
},
};
Plotly.newPlot("myDiv3", data, layout);
</script>
柱形图
<div id="myDiv" style="width: 600px"></div>
<div id="myDiv1" style="width: 600px"></div>
<div id="myDiv2" style="width: 600px"></div>
<div id="myDiv3" style="width: 600px"></div>
<div id="myDiv4" style="width: 600px"></div>
<div id="myDiv5" style="width: 600px"></div>
<script src="../plugins/d3.3.5.17.min.js"></script>
<script src="../plugins/plotly.min.js"></script>
<script>
var data = [
{
x: ["giraffes", "orangutans", "monkeys"],
y: [20, 14, 23],
type: "bar",
text: ["giraffes", "orangutans", "monkeys"],
textposition: "auto",
hoverinfo: "none",
},
];
var layout = {
bargap: 0.05,
};
Plotly.newPlot("myDiv", data);
</script>
<script>
var trace1 = {
x: ["giraffes", "orangutans", "monkeys"],
y: [20, 14, 23],
name: "SF Zoo",
type: "bar",
marker: {
color: "rgb(49,130,189)",
opacity: 0.7,
},
};
var trace2 = {
x: ["giraffes", "orangutans", "monkeys"],
y: [12, 18, 29],
name: "LA Zoo",
type: "bar",
marker: {
color: "rgb(204,204,204)",
opacity: 0.5,
},
};
var data = [trace1, trace2];
var layout = { barmode: "group", bargap: 0.15, bargroupgap: 0.1 };
Plotly.newPlot("myDiv1", data, layout);
</script>
<script>
var trace1 = {
x: ["giraffes", "orangutans", "monkeys"],
y: [20, 14, 23],
name: "SF Zoo",
type: "bar",
};
var trace2 = {
x: ["giraffes", "orangutans", "monkeys"],
y: [12, 18, 29],
name: "LA Zoo",
type: "bar",
};
var data = [trace1, trace2];
var layout = { barmode: "stack" };
Plotly.newPlot("myDiv2", data, layout);
</script>
<script>
var data = [
{
type: "bar",
x: ["2016", "2017", "2018"],
y: [500, 600, 700],
base: [-500, -600, -700],
hovertemplate: "%{base}",
marker: {
color: "red",
},
name: "expenses",
},
{
type: "bar",
x: ["2016", "2017", "2018"],
y: [300, 400, 700],
base: 0,
marker: {
color: "blue",
},
name: "revenue",
},
];
Plotly.newPlot("myDiv3", data);
</script>
<script>
// Base
var xData = ["Product<br>Revenue", "Services<br>Revenue", "Total<br>Revenue", "Fixed<br>Costs", "Variable<br>Costs", "Total<br>Costs", "Total"];
var yData = [400, 660, 660, 590, 400, 400, 340];
var textList = ["$430K", "$260K", "$690K", "$-120K", "$-200K", "$-320K", "$370K"];
//Base
var trace1 = {
x: xData,
y: [0, 430, 0, 570, 370, 370, 0],
marker: {
color: "rgba(1,1,1,0.0)",
},
type: "bar",
};
//Revenue
var trace2 = {
x: xData,
y: [430, 260, 690, 0, 0, 0, 0],
type: "bar",
marker: {
color: "rgba(55,128,191,0.7)",
line: {
color: "rgba(55,128,191,1.0)",
width: 2,
},
},
};
//Cost
var trace3 = {
x: xData,
y: [0, 0, 0, 120, 200, 320, 0],
type: "bar",
marker: {
color: "rgba(219, 64, 82, 0.7)",
line: {
color: "rgba(219, 64, 82, 1.0)",
width: 2,
},
},
};
//Profit
var trace4 = {
x: xData,
y: [0, 0, 0, 0, 0, 0, 370],
type: "bar",
marker: {
color: "rgba(50,171, 96, 0.7)",
line: {
color: "rgba(50,171,96,1.0)",
width: 2,
},
},
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
title: "Annual Profit 2015",
barmode: "stack",
paper_bgcolor: "rgba(245,246,249,1)",
plot_bgcolor: "rgba(245,246,249,1)",
width: 600,
height: 600,
showlegend: false,
annotations: [],
};
for (var i = 0; i < 7; i++) {
var result = {
x: xData[i],
y: yData[i],
text: textList[i],
font: {
family: "Arial",
size: 14,
color: "rgba(245,246,249,1)",
},
showarrow: false,
};
layout.annotations.push(result);
}
Plotly.newPlot("myDiv4", data, layout);
</script>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [1, 4, 9, 16],
name: "Trace1",
type: "bar",
};
var trace2 = {
x: [1, 2, 3, 4],
y: [6, -8, -4.5, 8],
name: "Trace2",
type: "bar",
};
var trace3 = {
x: [1, 2, 3, 4],
y: [-15, -3, 4.5, -8],
name: "Trace3",
type: "bar",
};
var trace4 = {
x: [1, 2, 3, 4],
y: [-1, 3, -3, -4],
name: "Trace4",
type: "bar",
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
xaxis: { title: "X axis" },
yaxis: { title: "Y axis" },
barmode: "relative",
title: "Relative Barmode",
};
Plotly.newPlot("myDiv5", data, layout);
</script>
气泡图
<div id="myDiv" style="width: 600px"></div>
<div id="myDiv1" style="width: 600px"></div>
<div id="myDiv2" style="width: 600px"></div>
<script src="../plugins/d3.3.5.17.min.js"></script>
<script src="../plugins/plotly.min.js"></script>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 11, 12, 13],
text: ["A", "B", "C", "D"],
mode: "markers",
marker: {
color: ["rgb(93, 164, 214)", "rgb(255, 144, 14)", "rgb(44, 160, 101)", "rgb(255, 65, 54)"],
opacity: [1, 0.8, 0.6, 0.4],
size: [40, 60, 80, 100],
},
};
var data = [trace1];
var layout = {
title: "Marker Size and Color",
showlegend: false,
};
Plotly.newPlot("myDiv", data, layout);
</script>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 11, 12, 13],
text: ["A<br>size: 40", "B<br>size: 60", "C<br>size: 80", "D<br>size: 100"],
mode: "markers",
marker: {
size: [400, 600, 800, 1000],
sizemode: "area",
},
};
var trace2 = {
x: [1, 2, 3, 4],
y: [14, 15, 16, 17],
text: ["A</br>size: 40</br>sixeref: 0.2", "B</br>size: 60</br>sixeref: 0.2", "C</br>size: 80</br>sixeref: 0.2", "D</br>size: 100</br>sixeref: 0.2"],
mode: "markers",
marker: {
size: [400, 600, 800, 1000],
//setting 'sizeref' to lower than 1 decreases the rendered size
sizeref: 2,
sizemode: "area",
},
};
var trace3 = {
x: [1, 2, 3, 4],
y: [20, 21, 22, 23],
text: ["A</br>size: 40</br>sixeref: 2", "B</br>size: 60</br>sixeref: 2", "C</br>size: 80</br>sixeref: 2", "D</br>size: 100</br>sixeref: 2"],
mode: "markers",
marker: {
size: [400, 600, 800, 1000],
//setting 'sizeref' to less than 1, increases the rendered marker sizes
sizeref: 0.2,
sizemode: "area",
},
};
// sizeref using above forumla
var desired_maximum_marker_size = 40;
var size = [400, 600, 800, 1000];
var trace4 = {
x: [1, 2, 3, 4],
y: [26, 27, 28, 29],
text: ["A</br>size: 40</br>sixeref: 1.25", "B</br>size: 60</br>sixeref: 1.25", "C</br>size: 80</br>sixeref: 1.25", "D</br>size: 100</br>sixeref: 1.25"],
mode: "markers",
marker: {
size: size,
//set 'sizeref' to an 'ideal' size given by the formula sizeref = 2. * max(array_of_size_values) / (desired_maximum_marker_size ** 2)
sizeref: (2.0 * Math.max(...size)) / desired_maximum_marker_size ** 2,
sizemode: "area",
},
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
title: "Bubble Chart Size Scaling",
showlegend: false,
};
Plotly.newPlot("myDiv1", data, layout);
</script>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 11, 12, 13],
mode: "markers",
marker: {
color: ["hsl(0,100,40)", "hsl(33,100,40)", "hsl(66,100,40)", "hsl(99,100,40)"],
size: [12, 22, 32, 42],
opacity: [0.6, 0.7, 0.8, 0.9],
},
type: "scatter",
};
var trace2 = {
x: [1, 2, 3, 4],
y: [11, 12, 13, 14],
mode: "markers",
marker: {
color: "rgb(31, 119, 180)",
size: 18,
symbol: ["circle", "square", "diamond", "cross"],
},
type: "scatter",
};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 13, 14, 15],
mode: "markers",
marker: {
size: 18,
line: {
color: ["rgb(120,120,120)", "rgb(120,120,120)", "red", "rgb(120,120,120)"],
width: [2, 2, 6, 2],
},
},
type: "scatter",
};
var data = [trace1, trace2, trace3];
var layout = { showlegend: false };
Plotly.newPlot("myDiv2", data, layout);
</script>
浙公网安备 33010602011771号