可视化组件plotly.js绘制简单图表示例之直方图、饼图、箱型图

直方图

<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>