直方图
<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> <div id="myDiv6" style="width: 600px"></div> <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> <script> var x = []; for (var i = 0; i < 500; i++) { x[i] = Math.random(); } var trace = { x: x, type: "histogram", }; var data = [trace]; Plotly.newPlot("myDiv", data); </script> <script> var x1 = []; var x2 = []; for (var i = 1; i < 500; i++) { k = Math.random(); x1.push(Math.random() + 1); x2.push(Math.random() + 1.1); } var trace1 = { x: x1, type: "histogram", opacity: 0.5, marker: { color: "green", }, }; var trace2 = { x: x2, type: "histogram", opacity: 0.6, marker: { color: "red", }, }; var data = [trace1, trace2]; var layout = { barmode: "overlay" }; Plotly.newPlot("myDiv1", data, layout); </script> <script> var x1 = []; var x2 = []; for (var i = 0; i < 500; i++) { x1[i] = Math.random(); x2[i] = Math.random(); } var trace1 = { x: x1, type: "histogram", }; var trace2 = { x: x2, type: "histogram", }; var data = [trace1, trace2]; var layout = { barmode: "stack" }; Plotly.newPlot("myDiv2", data, layout); </script> <script> var x1 = []; var x2 = []; var y1 = []; var y2 = []; for (var i = 1; i < 500; i++) { k = Math.random(); x1.push(k * 5); x2.push(k * 10); y1.push(k); y2.push(k * 2); } var trace1 = { x: x1, y: y1, name: "control", autobinx: false, histnorm: "count", marker: { color: "rgba(255, 100, 102, 0.7)", line: { color: "rgba(255, 100, 102, 1)", width: 1, }, }, opacity: 0.5, type: "histogram", xbins: { end: 2.8, size: 0.06, start: 0.5, }, }; var trace2 = { x: x2, y: y2, autobinx: false, marker: { color: "rgba(100, 200, 102, 0.7)", line: { color: "rgba(100, 200, 102, 1)", width: 1, }, }, name: "experimental", opacity: 0.75, type: "histogram", xbins: { end: 4, size: 0.06, start: -3.2, }, }; var data = [trace1, trace2]; var layout = { bargap: 0.05, bargroupgap: 0.2, barmode: "overlay", title: "Sampled Results", xaxis: { title: "Value" }, yaxis: { title: "Count" }, }; Plotly.newPlot("myDiv3", data, layout); </script> <script> var x = []; for (var i = 0; i < 500; i++) { x[i] = Math.random(); } var trace = { x: x, type: "histogram", cumulative: { enabled: true }, }; var data = [trace]; Plotly.newPlot("myDiv4", data); </script> <script> var x = []; for (var i = 0; i < 500; i++) { x[i] = Math.random(); } var data = [ { x: x, type: "histogram", histnorm: "probability", }, ]; Plotly.newPlot("myDiv5", data); </script> <script> var x = ["Apples", "Apples", "Apples", "Oranges", "Bananas"]; var y = ["5", "10", "3", "10", "5"]; var data = [ { histfunc: "count", y: y, x: x, type: "histogram", name: "count", }, { histfunc: "sum", y: y, x: x, type: "histogram", name: "sum", }, ]; Plotly.newPlot("myDiv6", data); </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 = [ { type: "pie", values: [2, 5, 3, 2.5], labels: ["R", "Python", "Java Script", "Matlab"], texttemplate: "%{label}: %{value} (%{percent})", textposition: "inside", }, ]; Plotly.newPlot("myDiv", data); </script> <script> var data = [ { values: [16, 15, 12, 6, 5, 4, 42], labels: ["US", "China", "European Union", "Russian Federation", "Brazil", "India", "Rest of World"], domain: { column: 0 }, name: "GHG Emissions", hoverinfo: "label+percent+name", textinfo: "none", hole: 0.4, type: "pie", }, { values: [27, 11, 25, 8, 1, 3, 25], labels: ["US", "China", "European Union", "Russian Federation", "Brazil", "India", "Rest of World"], text: "CO2", textposition: "inside", domain: { column: 1 }, name: "CO2 Emissions", hoverinfo: "label+percent+name", hole: 0.4, type: "pie", }, ]; var layout = { title: "Global Emissions 1990-2011", annotations: [ { font: { size: 20, }, showarrow: false, text: "GHG", x: 0.17, y: 0.5, }, { font: { size: 20, }, showarrow: false, text: "CO2", x: 0.82, y: 0.5, }, ], showlegend: false, grid: { rows: 1, columns: 2 }, }; Plotly.newPlot("myDiv1", data, layout); </script> <script> var data = [ { type: "pie", values: [2, 3, 4, 4], labels: ["Wages", "Operating expenses", "Cost of sales", "Insurance"], textinfo: "label+percent", textposition: "outside", automargin: true, }, ]; var layout = { margin: { t: 0, b: 0, l: 0, r: 0 }, showlegend: false, }; Plotly.newPlot("myDiv2", data, layout); </script> <script> var data = [ { type: "pie", values: [2, 3, 4, 4], labels: ["Wages", "Operating expenses", "Cost of sales", "Insurance"], textinfo: "label+percent", textposition: "inside", insidetextorientation: "radial", }, ]; Plotly.newPlot("myDiv3", data); </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 = [ { y: [0, 1, 1, 2, 3, 5, 8, 13, 21], boxpoints: "all", jitter: 0.3, pointpos: -1.8, hoveron: "boxes", type: "box", text: "14", hoverinfo: "all", }, { y: [0, 1, 1, 2, 3, 5, 8, 13, 21], boxpoints: "all", text: "14", jitter: 0.3, pointpos: -1.8, hoveron: "boxes", type: "box", quartilemethod: "exclusive", hoverinfo: "all", }, { y: [0, 1, 1, 2, 3, 5, 8, 13, 21], boxpoints: "all", jitter: 0.3, pointpos: -1.8, type: "box", quartilemethod: "inclusive", }, { type: "box", q1: [1], median: [3], q3: [9.25], lowerfence: [0], upperfence: [18], }, ]; Plotly.newPlot("myDiv", data); document .getElementById("myDiv") .on("plotly_hover", function (data) { var points = data.points[0], pointNum = points.pointNumber; Plotly.Fx.hover("myDiv", [ { curveNumber: 0, pointNumber: pointNum }, { curveNumber: 1, pointNumber: pointNum }, { curveNumber: 2, pointNumber: pointNum }, ]); }) .on("plotly_unhover", function (data) { hoverInfo.innerHTML = ""; }); </script> <script> var trace1 = { x: [1, 2, 3, 4, 4, 4, 8, 9, 10], type: "box", name: "Set 1", }; var trace2 = { x: [2, 3, 3, 3, 3, 5, 6, 6, 7], type: "box", name: "Set 2", }; var data = [trace1, trace2]; var layout = { title: "Horizontal Box Plot", }; Plotly.newPlot("myDiv1", data, layout); </script> <script> var x = ["day 1", "day 1", "day 1", "day 1", "day 1", "day 1", "day 2", "day 2", "day 2", "day 2", "day 2", "day 2"]; var trace1 = { y: [0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3], x: x, name: "kale", marker: { color: "#3D9970" }, type: "box", boxmean: false, }; var trace2 = { y: [0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2], x: x, name: "radishes", marker: { color: "#FF4136" }, type: "box", boxmean: true, }; var trace3 = { y: [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5], x: x, name: "carrots", marker: { color: "#FF851B" }, type: "box", boxmean: "sd", }; var data = [trace1, trace2, trace3]; var layout = { xaxis: { title: "normalized moisture", zeroline: false, }, boxmode: "group", }; Plotly.newPlot("myDiv2", data, layout); </script> <script> var xData = ["Carmelo<br>Anthony", "Dwyane<br>Wade", "Deron<br>Williams", "Brook<br>Lopez", "Damian<br>Lillard", "David<br>West", "Blake<br>Griffin", "David<br>Lee", "Demar<br>Derozan"]; function getrandom(num, mul) { var value = []; for (i = 0; i <= num; i++) { var rand = Math.random() * mul; value.push(rand); } return value; } var yData = [getrandom(30, 10), getrandom(30, 20), getrandom(30, 25), getrandom(30, 40), getrandom(30, 45), getrandom(30, 30), getrandom(30, 20), getrandom(30, 15), getrandom(30, 43)]; var colors = ["rgba(93, 164, 214, 0.5)", "rgba(255, 144, 14, 0.5)", "rgba(44, 160, 101, 0.5)", "rgba(255, 65, 54, 0.5)", "rgba(207, 114, 255, 0.5)", "rgba(127, 96, 0, 0.5)", "rgba(255, 140, 184, 0.5)", "rgba(79, 90, 117, 0.5)", "rgba(222, 223, 0, 0.5)"]; var data = []; for (var i = 0; i < xData.length; i++) { var result = { type: "box", y: yData[i], name: xData[i], boxpoints: "all", jitter: 1, pointpos: 0, whiskerwidth: 0.2, fillcolor: "cls", marker: { size: 2, }, line: { width: 1, }, hoverinfo: "x+y+z+text+name", }; data.push(result); } layout = { title: "Points Scored by the Top 9 Scoring NBA Players in 2012", yaxis: { autorange: true, showgrid: true, linewidth: 2, linecolor: "rgb(255, 255, 255)", zeroline: true, dtick: 5, gridcolor: "rgb(255, 255, 255)", gridwidth: 1, zerolinecolor: "rgb(255, 255, 255)", zerolinewidth: 2, range: [0, 50], }, margin: { l: 40, r: 30, b: 80, t: 100, }, paper_bgcolor: "rgb(243, 243, 243)", plot_bgcolor: "rgb(243, 243, 243)", showlegend: false, shapes: [ { type: "line", x0: "Carmelo<br>Anthony", y0: 25, x1: "Demar<br>Derozan", y1: 25, line: { color: "red", dash: "dash", width: 1, }, }, { type: "line", x0: "Carmelo<br>Anthony", y0: 36, x1: "Demar<br>Derozan", y1: 36, line: { color: "blue", width: 1, }, }, ], }; Plotly.newPlot("myDiv3", data, layout); window.onresize = function () { Plotly.Plots.resize("myDiv"); }; </script> <script> var trace1 = { y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.5, 0.18, 4.66, 1.3, 2.06, 1.19], type: "box", boxpoints: "all", jitter: 1, pointpos: 0, name: "Only Mean", marker: { color: "rgb(8,81,156)", }, boxmean: true, }; var trace2 = { y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.5, 0.18, 4.66, 1.3, 2.06, 1.19], type: "box", name: "Mean and Standard Deviation", boxpoints: "all", jitter: 1, pointpos: 0, marker: { color: "rgb(10,140,208)", }, boxmean: "sd", }; var data = [trace1, trace2]; var layout = { title: "Box Plot Styling Mean and Standard Deviation", }; Plotly.newPlot("myDiv4", data, layout); </script> <script> var trace1 = { y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.9, 22.3, 23.25], type: "box", name: "All Points", jitter: 0.3, pointpos: -1.8, marker: { color: "rgb(7,40,89)", }, boxpoints: "all", }; var trace2 = { y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.9, 22.3, 23.25], type: "box", name: "Only Wiskers", marker: { color: "rgb(9,56,125)", }, boxpoints: false, }; var trace3 = { y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.9, 22.3, 23.25], type: "box", name: "Suspected Outlier", marker: { color: "rgb(8,81,156)", outliercolor: "rgba(219, 64, 82, 0.6)", line: { outliercolor: "rgba(219, 64, 82, 1.0)", outlierwidth: 2, }, }, boxpoints: "suspectedoutliers", }; var trace4 = { y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.8, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.9, 22.3, 23.25], type: "box", name: "Wiskers and Outliers", marker: { color: "rgb(107,174,214)", }, boxpoints: "Outliers", }; var data = [trace1, trace2, trace3, trace4]; var layout = { title: "Box Plot Styling Outliers", }; Plotly.newPlot("myDiv5", data, layout); </script>
<div id="myDiv1" style="width: 600px"></div> <div id="myDiv2" style="width: 600px"></div> <div id="myDiv3" style="width: 600px"></div> <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> <script> Plotly.newPlot("myDiv1", [ { type: "box", x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], y: [0, 1, 1, 1, 2, 2, 2, 3, 3, 4, 10, 0, 1, 1, 1, 2, 2, 2, 3, 3, 4, 10], }, { type: "box", x: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], y: [0, 0, 0, 1, 2, 2, 2, 3, 3, 5, 9, 0, 0, 0, 1, 2, 2, 2, 3, 3, 5, 9], }, ]); </script> <script> Plotly.newPlot( "myDiv2", [ { type: "box", y: [1, 1, 1, 2, 2, 2, 3, 3, 4, 4, 5, 10], }, { type: "box", y: [100, 122, 100, 100, 200, 122, 122, 100], xaxis: "x2", yaxis: "y2", }, ], { xaxis: { domain: [0, 0.5], }, xaxis2: { domain: [0.5, 1], }, yaxis2: { anchor: "x2", side: "right", }, showlegend: false, } ); </script> <script> var Y = [ [0.2, 0.2, 0.6, 1.0, 0.5, 0.4], [0.2, 0.7, 0.9, 0.1, 0.5, 0.3], [0.6, 0.7, 0.3, 0.6, 0.0, 0.5], [0.7, 0.9, 0.5, 0.8, 0.7, 0.2], [0.1, 0.3, 0.1, 0.9, 0.6, 0.6], [0.9, 1.0, 0.3, 0.6, 0.8, 0.5], ]; var color1 = "#3D9970"; var color2 = "#FF4136"; Plotly.newPlot( "myDiv3", [ { y: Y[0], x: Y[0].map(() => "day 1"), name: "kale", marker: { color: color1 }, type: "box", }, { y: Y[1], x: Y[1].map(() => "day 2"), name: "kale", marker: { color: color2 }, type: "box", }, { y: Y[2], x: Y[2].map(() => "day 1"), name: "radishes", marker: { color: color1 }, type: "box", }, { y: Y[3], x: Y[3].map(() => "day 2"), name: "radishes", marker: { color: color2 }, type: "box", }, { y: Y[4], x: Y[4].map(() => "day 1"), name: "carrots", marker: { color: color1 }, type: "box", }, { y: Y[5], x: Y[5].map(() => "day 2"), name: "carrots", marker: { color: color2 }, type: "box", }, ], { yaxis: { title: "normalized moisture", zeroline: false, }, boxmode: "group", showlegend: false, } ); </script>
