可视化组件plotly.js绘制简单图表示例

标签：layout 示例 type js marker plotly var data trace1

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>

标签：layout,示例,type,js,marker,plotly,var,data,trace1
From： https://www.cnblogs.com/caroline2016/p/17243931.html

可视化组件plotly.js绘制简单图表示例

相关文章

赞助商

阅读排行