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>
<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>
柱形图bar
<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>
