可视化组件plotly.js之spc、hoverTemplate、shapes示例

spc

<div id="myDiv" 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: "scatter",
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    y: [4, 2, -1, 4, -5, -7, 0, 3, 8],
    mode: "lines+markers",
    name: "Data",
    showlegend: true,
    hoverinfo: "all",
    line: {
      color: "blue",
      width: 2,
    },
    marker: {
      color: "blue",
      size: 8,
      symbol: "circle",
    },
  };

  var Viol = {
    type: "scatter",
    x: [6, 9],
    y: [-7, 8],
    mode: "markers",
    name: "Violation",
    showlegend: true,
    marker: {
      color: "rgb(255,65,54)",
      line: { width: 3 },
      opacity: 0.5,
      size: 12,
      symbol: "circle-open",
    },
  };

  var CL = {
    type: "scatter",
    x: [0.5, 10, null, 0.5, 10],
    y: [-5, -5, null, 5, 5],
    mode: "lines",
    name: "LCL/UCL",
    showlegend: true,
    line: {
      color: "red",
      width: 2,
      dash: "dash",
    },
  };

  var Centre = {
    type: "scatter",
    x: [0.5, 10],
    y: [0, 0],
    mode: "lines",
    name: "Centre",
    showlegend: true,
    line: {
      color: "grey",
      width: 2,
    },
  };

  var histo = {
    type: "histogram",
    x: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    y: [4, 2, -1, 4, -5, -7, 0, 3, 8],
    name: "Distribution",
    orientation: "h",
    marker: {
      color: "blue",
      line: {
        color: "white",
        width: 1,
      },
    },
    xaxis: "x2",
    yaxis: "y2",
  };

  var data = [Data, Viol, CL, Centre, histo];

  // layout
  var layout = {
    title: "Basic SPC Chart",
    xaxis: {
      domain: [0, 0.7], // 0 to 70% of width
      zeroline: false,
    },
    yaxis: {
      range: [-10, 10],
      zeroline: false,
    },
    xaxis2: {
      domain: [0.8, 1], // 70 to 100% of width
    },
    yaxis2: {
      anchor: "x2",
      showticklabels: false,
    },
  };

  Plotly.newPlot("myDiv", data, layout);
</script>

hover

<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 data = [
    {
      x: [0, 0.5, 1, 1.5, 2],
      y: [1, 3, 2, 4, 2],
      mode: "markers",
      marker: { size: 16 },
      text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
      type: "scatter",
    },
  ];
  var layout = { title: "Hover over the points to see the text" };
  Plotly.newPlot("myDiv", data, layout);
</script>

<script>
  var N = 40,
    x = d3.range(N).map(d3.random.normal()),
    y1 = d3.range(N).map(d3.random.normal()),
    y2 = d3.range(N).map(d3.random.normal()),
    data = [
      { x: x, y: y1, type: "scatter", mode: "markers", marker: { color: "rgba(200, 50, 100, .7)", size: 16 }, hoverinfo: "x+y" },
      { x: x, y: y2, type: "scatter", mode: "markers", marker: { color: "rgba(10, 180, 180, .8)", size: 16 }, hoverinfo: "x+y" },
    ];
  layout = {
    hovermode: "closest",
    title: "Formatting X & Y Hover Values",
    xaxis: { zeroline: false, hoverformat: ".2f", title: "Rounded: 2 values after the decimal point on hover" },
    yaxis: { zeroline: false, hoverformat: ".2r", title: "Rounded: 2 significant values on hover" },
  };

  Plotly.newPlot("myDiv1", data, layout);
</script>
<script>
  var data = [
    {
      type: "scatter",
      mode: "lines+markers",
      x: [1, 2, 3, 4, 5],
      y: [2.02825, 1.63728, 6.83839, 4.8485, 4.73463],
      hovertemplate: "<i>Price</i>: $%{y:.2f}" + "<br><b>X</b>: %{x}<br>" + "<b>%{text}</b>",
      text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
      showlegend: false,
    },
    {
      x: [1, 2, 3, 4, 5],
      y: [3.02825, 2.63728, 4.83839, 3.8485, 1.73463],
      hovertemplate: "Price: %{y:$.2f}<extra></extra>",
      showlegend: false,
    },
  ];

  var layout = {
    title: "Set hover text with hovertemplate",
  };

  Plotly.newPlot("myDiv2", data, layout);
</script>

shapes

<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 trace1 = {
    x: ["a0", "a1", "a2", "a3", "a4"],
    y: [1, 5, 3, 7, 5],
    mode: "lines+markers",
    type: "scatter",
    line: { color: "#17BECF" },
    marker: {
      color: "#C8A2C8",
      line: {
        width: 2.5,
      },
    },
  };

  var trace2 = {
    x: ["a1", "a2", "a3", "a4", "a5"],
    y: [4, 0, 4, 6, 8],
    mode: "lines+markers",
    type: "scatter",
  };

  var trace3 = {
    type: "scatter",
    x: ["a0", "a5", null, "a0", "a5", null, "a0", "a5"],
    y: [1, 1, null, 4, 4, null, 6, 6],
    mode: "lines",
    name: "LCL/UCL",
    showlegend: true,
    line: {
      color: "red",
      width: 2,
      dash: "dash",
    },
  };

  var data = [trace1, trace2, trace3];

  layout2 = {
    title: "plot",
  };
  Plotly.newPlot("myDiv2", data, layout2, { modeBarButtonsToRemove: ["pan2d", "select2d", "lasso2d"], displaylogo: false });
</script>
<script>
  var trace1 = {
    x: ["a0", "a1", "a2", "a3", "a4"],
    y: [1, 5, 3, 7, 5],
    mode: "lines+markers",
    type: "scatter",
    line: { color: "#17BECF" },
    marker: {
      color: "#C8A2C8",
      line: {
        width: 2.5,
      },
    },
  };

  var trace2 = {
    x: ["a1", "a2", "a3", "a4", "a5"],
    y: [4, 0, 4, 6, 8],
    mode: "lines+markers",
    type: "scatter",
  };

  var data = [trace1, trace2];

  layout2 = {
    title: "plot",
    yaxis: {
      zeroline: true,
      visible: true,
    },
    xaxis: {
      zeroline: true,
      visible: true,
    },
    shapes: [
      {
        type: "line",
        yref: "y",
        xref: "paper",
        x0: 0,
        y0: 1,
        x1: 1,
        y1: 1,
        line: {
          color: "red",
          dash: "dot",
          width: 1,
        },
      },
      {
        type: "line",
        yref: "y",
        xref: "paper",
        x0: 0,
        y0: 3,
        x1: 1,
        y1: 3,
        line: {
          color: "red",
          dash: "dot",
          width: 1,
        },
      },
      ,
      {
        type: "line",
        yref: "y",
        xref: "paper",
        x0: 0,
        y0: 5,
        x1: 1,
        y1: 5,
        line: {
          color: "red",
          dash: "dot",
          width: 1,
        },
      },
    ],
    annotations: [
      {
        xref: "paper",
        yref: "y",
        x: 1,
        xanchor: "left",
        y: 5,
        yanchor: "middle",
        text: "bmax",
        showarrow: false,
      },
      {
        xref: "paper",
        yref: "y",
        x: 1,
        xanchor: "left",
        y: 3,
        yanchor: "middle",
        text: "sval",
        showarrow: false,
      },
      {
        xref: "paper",
        yref: "y",
        x: 1,
        xanchor: "left",
        y: 1,
        yanchor: "middle",
        text: "bmin",
        showarrow: false,
      },
    ],
  };
  Plotly.newPlot("myDiv3", data, layout2, { modeBarButtonsToRemove: ["pan2d", "select2d", "lasso2d"], displaylogo: false });
</script>

<script>
  var trace1 = {
    x: ["a1"],
    y: [4],
    mode: "lines+markers",
    type: "scatter",
  };

  var trace2 = {
    type: "scatter",
    x: ["a1"],
    y: [1],
    mode: "lines",
    name: "LCL/UCL",
    showlegend: true,
    line: {
      color: "red",
      width: 1,
      dash: "dash",
    },
  };

  var data = [trace1];

  layout2 = {
    title: "plot",
    yaxis: {
      zeroline: true,
      visible: true,
    },
    xaxis: {
      zeroline: true,
      visible: true,
    },
    shapes: [
      {
        type: "line",
        yref: "y",
        xref: "paper",
        x0: 0,
        y0: 5,
        x1: 1,
        y1: 5,
        line: {
          color: "red",
          dash: "dot",
          width: 1,
        },
      },
    ],
    annotations: [
      {
        xref: "paper",
        yref: "y",
        x: 1,
        xanchor: "left",
        y: 5,
        yanchor: "middle",
        text: "bmax",
        showarrow: false,
      },
    ],
  };
  Plotly.newPlot("myDiv4", data, layout2, { modeBarButtonsToRemove: ["pan2d", "select2d", "lasso2d"], displaylogo: false });
</script>