可视化组件plotly.js之方法、事件、config、layout

方法

<script src="../plugins/d3.3.5.17.min.js"></script>
<script src="../plugins/plotly.min.js"></script>
<script src="../plugins/jquery/jquery-1.9.1.js"></script>
<div id="myDiv"></div>
<img src="" id="graphImg" />
<script>
  var graphDiv = document.getElementById("myDiv");
  var trace1 = {
    x: [0, 1, 2, 3, 4],
    y: [1, 5, 3, 7, 5],
    mode: "lines+markers",
    type: "scatter",
    line: { color: "#17BECF" },
    marker: {
      color: "#C8A2C8",
      line: {
        width: 2.5,
      },
    },
  };
  var trace2 = {
    x: [1, 2, 3, 4, 5],
    y: [4, 0, 4, 6, 8],
    mode: "lines+markers",
    type: "scatter",
  };
  var data = [trace1, trace2];
  var layout = { title: "function" };

  //绘制图表
  Plotly.newPlot(graphDiv, data, layout);

  setTimeout(() => {
    const newData = [
      {
        x: [0, 1, 2, 3, 4],
        y: [1, 5, 3, 7, 5],
        type: "scatter",
      },
      {
        x: [0, 1, 2, 3, 4],
        y: [4, 0, 4, 6, 8],
        type: "scatter",
      },
    ];
    //重新绘制图表
    Plotly.react(graphDiv, newData, layout);
  }, 1000);

  setTimeout(() => {
    //重设图表样式
    Plotly.restyle(
      graphDiv,
      {
        opacity: 0.4,
        "marker.color": ["red", "green"],
        "line.color": ["blue", null],
      },
      [0, 1]
    );
    // use the dataUrl
    Plotly.toImage(graphDiv, { format: "png", width: 800, height: 600 }).then(function (dataUrl) {
      document.getElementById("graphImg").setAttribute("src", dataUrl);
    });
    //下载图表
    Plotly.downloadImage(graphDiv, { format: "png", width: 800, height: 600, filename: "newplot" });
  }, 2000);

  setTimeout(() => {
    //重设layout对象
    Plotly.relayout(graphDiv, {
      title: "some new title", // updates the title
      "xaxis.range": [0, 5], // updates the xaxis range
      "yaxis.range[1]": 10, // updates the end of the yaxis range
    });
  }, 3000);

  setTimeout(() => {
    const layout_update = {
      title: "anothor title",
      "xaxis.range": [-0.5, 4],
      "yaxis.range": [-0.5, 8],
    };
    const data_update = {
      opacity: 0.8,
      "line.color": ["red", "green"],
    };
    //更新样式和layout
    Plotly.update(graphDiv, data_update, layout_update, [0, 2]);
  }, 4000);

  setTimeout(() => {
    // add two traces
    Plotly.addTraces(graphDiv, [{ y: [2, 1, 2, 5, 3] }, { y: [4, 5, 3, 7, 2] }], [0, 2]);
  }, 5000);

  setTimeout(() => {
    // move selected traces (at indices [1, 2]) to new indices [0, 3]
    Plotly.moveTraces(graphDiv, [1, 2], [0, 3]);
  }, 6000);

  setTimeout(() => {
    // remove the first trace
    Plotly.deleteTraces(graphDiv, 2);
  }, 7000);

  setTimeout(() => {
    //清除图表
    Plotly.purge(graphDiv);
  }, 8000);

  setTimeout(() => {
    var figure = {
      data: [
        {
          type: "bar",
          marker: { color: "red" },
        },
      ],
      layout: {
        title: "Quarterly Earnings",
      },
    };
    //样式和layout模板
    var template = Plotly.makeTemplate(figure);
    var newData = [
      {
        type: "bar",
        y: [3, 2, 5],
      },
    ];
    var layout = { template: template };
    Plotly.newPlot(graphDiv, newData, layout);
  }, 9000);
</script>

事件 event

<div id="myDiv"></div>
<div id="hoverinfo"></div>
<div id="myDiv1"></div>
<button id="hoverbutton">Go</button>
<div id="myDiv2"></div>
<script src="../plugins/d3.3.5.17.min.js"></script>
<script src="../plugins/plotly.min.js"></script>

<script>
  var myPlot = document.getElementById("myDiv"),
    hoverInfo = document.getElementById("hoverinfo"),
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map(d3.random.normal()),
    y2 = d3.range(N).map(d3.random.normal()),
    data = [
      { x: x, y: y1, type: "scatter", name: "Trial 1", mode: "markers", marker: { size: 16, color: d3.range(N).map(() => "#000000") } },
      { x: x, y: y2, type: "scatter", name: "Trial 2", mode: "markers", marker: { size: 16, color: d3.range(N).map(() => "#0000FF") } },
    ];
  layout = {
    hovermode: "closest",
    title: "Hover on Points",
  };

  Plotly.newPlot("myDiv", data, layout);

  myPlot
    .on("plotly_hover", function (data) {
      var infotext = data.points.map(function (d) {
        return d.data.name + ": x= " + d.x + ", y= " + d.y.toPrecision(3);
      });

      hoverInfo.innerHTML = infotext.join("<br/>");
    })
    .on("plotly_unhover", function (data) {
      hoverInfo.innerHTML = "";
    })
    .on("plotly_click", function (data) {
      var pn = "",
        tn = "",
        colors = [];
      for (var i = 0; i < data.points.length; i++) {
        pn = data.points[i].pointNumber;
        tn = data.points[i].curveNumber;
        colors = data.points[i].data.marker.color;
      }
      if (tn == 0 && colors[pn] == "#000000") {
        colors[pn] = "#FF0000";
      } else if (tn == 0 && colors[pn] == "#FF0000") {
        colors[pn] = "#000000";
      } else if (tn == 1 && colors[pn] == "#0000FF") {
        colors[pn] = "#00FF00";
      } else if (tn == 1 && colors[pn] == "#00FF00") {
        colors[pn] = "#0000FF";
      }
      var update = { marker: { color: colors, size: 16 } };
      Plotly.restyle("myDiv", update, [tn]);
    })
    .on("plotly_selecting", function (data) {
      console.log(data);
    })
    .on("plotly_selected", function (data) {
      console.log(data);
    })
    .on("plotly_beforplot", function () {
      console.log("before plotting");
    })
    .on("plotly_afterplot", function () {
      console.log("done plotting");
    })
    .on("plotly_doubleclick", function (data) {
      console.log(data);
    });
</script>
<script>
  var myPlot1 = document.getElementById("myDiv1"),
    hoverButton = document.getElementById("hoverbutton"),
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map(d3.random.normal()),
    y2 = d3.range(N).map(d3.random.normal()),
    data = [
      { x: x, y: y1, type: "scatter", name: "Trial 1", mode: "markers", marker: { size: 16 } },
      { x: x, y: y2, type: "scatter", name: "Trial 2", mode: "markers", marker: { size: 16 } },
    ];
  layout = {
    hovermode: "closest",
    title: 'Click "Go" button to trigger hover',
  };

  Plotly.newPlot("myDiv1", data, layout);

  myPlot1.on("plotly_beforehover", function () {
    return false;
  });

  hoverButton.addEventListener("click", function () {
    var curve1 = Math.floor(Math.random() * 2),
      curve2 = Math.floor(Math.random() * 2),
      point1 = Math.floor(Math.random() * 14),
      point2 = Math.floor(Math.random() * 14);
    Plotly.Fx.hover("myDiv1", [
      { curveNumber: curve1, pointNumber: point1 },
      { curveNumber: curve2, pointNumber: point2 },
    ]);
  });
</script>

<script>
  var myPlot2 = document.getElementById("myDiv2"),
    N = 12,
    x1 = d3.range(N).map(d3.random.normal()),
    x2 = d3.range(N).map(d3.random.normal()),
    x3 = d3.range(N).map(d3.random.normal()),
    y1 = d3.range(N).map(d3.random.normal()),
    y2 = d3.range(N).map(d3.random.normal()),
    y3 = d3.range(N).map(d3.random.normal()),
    months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  data = [
    { x: x1, y: y1, text: months, type: "scatter", name: "2014", hoverinfo: "text+x+y", mode: "markers", marker: { color: "rgba(200, 50, 100, .7)", size: 16 } },
    { x: x2, y: y2, text: months, type: "scatter", name: "2015", hoverinfo: "text+x+y", mode: "markers", marker: { color: "rgba(120, 20, 130, .7)", size: 16 } },
    { x: x3, y: y3, text: months, type: "scatter", name: "2016", hoverinfo: "text+x+y", mode: "markers", marker: { color: "rgba(10, 180, 180, .8)", size: 16 } },
  ];
  layout = {
    hovermode: "closest",
    title: "Display Hover Info for Related Points",
    xaxis: { zeroline: false, hoverformat: ".2r" },
    yaxis: { zeroline: false, hoverformat: ".2r" },
  };

  Plotly.newPlot("myDiv2", data, layout);

  myPlot2.on("plotly_hover", function (eventdata) {
    var points = eventdata.points[0],
      pointNum = points.pointNumber;

    Plotly.Fx.hover("myDiv2", [
      { curveNumber: 0, pointNumber: pointNum },
      { curveNumber: 1, pointNumber: pointNum },
      { curveNumber: 2, pointNumber: pointNum },
    ]);
  });
</script>

config

<div id="myDiv"></div>
<div id="myDiv1"></div>

<script src="../plugins/plotly.min.js"></script>
<script>
  // config
  // responsive:是否根据页面大小自动调整图表大小
  // scrollZomm:是否可以使用鼠标滚轮缩放图像
  // editable:是否可以编辑图表title及轴title
  // staticPlot:图表是否可以交互或者是否为静态图表，不显示图表工具
  // displayModeBar:是否显示图表工具
  var data = [
    {
      x: [0, 1, 2, 3, 4],
      y: [1, 5, 3, 7, 5],
      mode: "lines+markers",
      type: "scatter",
      line: { color: "#17BECF" },
      marker: {
        color: "#C8A2C8",
        line: {
          width: 2.5,
        },
      },
    },
  ];
  var layout = { title: "Click Here<br>to Edit Chart Title" };

  Plotly.newPlot("myDiv", data, layout, { responsive: true, scrollZomm: true, responsive: true, editable: true });
</script>
<script>
  var data1 = [
    {
      x: [0, 1, 2, 3, 4, 5, 6],
      y: [1, 9, 4, 7, 5, 2, 4],
      mode: "markers",
      marker: {
        size: [20, 40, 25, 10, 60, 90, 30],
      },
    },
  ];

  var layout1 = {
    title: "Download Chart as SVG instead of PNG",
    showlegend: false,
  };

  var icon1 = {
    width: 500,
    height: 600,
    path: "M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z",
  };

  var config1 = {
    displayModeBar: true,
    //配置下载图像选项
    toImageButtonOptions: {
      format: "svg", // one of png, svg, jpeg, webp
      filename: "custom_image",
      height: 500,
      width: 700,
      scale: 1, // Multiply title/legend/axis/canvas sizes by this factor
    },
    //自定义图表工具按钮
    modeBarButtonsToAdd: [
      {
        name: "color toggler",
        icon: icon1,
        click: function (gd) {
          var newColor = colors[Math.floor(3 * Math.random())];
          Plotly.restyle(gd, "line.color", newColor);
        },
      },
      {
        name: "button1",
        icon: Plotly.Icons.pencil,
        direction: "up",
        click: function (gd) {
          alert("button1");
        },
      },
    ],
    //不显示部分工具按钮
    modeBarButtonsToRemove: ["pan2d", "select2d", "lasso2d", "resetScale2d", "zoomOut2d"],
    //不显示logo
    displaylogo: false,
    //locale
    locale: "fr",

    //自定义超链接
    showLink: true,
    plotlyServerURL: "https://chart-studio.plotly.com",
    linkText: "This text is custom!",
  };

  Plotly.newPlot("myDiv1", data1, layout1, config1);
</script>

layout

<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 trace1 = {
    x: [0, 1, 2, 3, 4],
    y: [800000, 700000, 600000, 500000, 400000],
    type: "scatter",
    hoverinfo: "x+y",
    marker: { size: 15, sizeref: 4000, sizemode: "area" },
  };
  var trace2 = {
    x: [0, 1, 2, 3, 4],
    y: [100000, 200000, 300000, 400000, 500000],
    type: "scatter",
    text: ["Apples", "Pears", "Peaches", "Bananas", "Pineapples"],
    hovertemplate: "<b>%{text}</b><br><br>" + "%{yaxis.title.text}: %{y:$,.0f}<br>" + "%{xaxis.title.text}: %{x:.0%}<br>" + "Number Employed: %{marker.size:,}" + "<extra></extra>",
  };
  var data = [trace1, trace2];
  var layout = {
    //画布
    autosize: false,
    width: 600,
    height: 300,
    margin: {
      l: 50,
      r: 50,
      b: 100,
      t: 100,
      pad: 4,
    },
    paper_bgcolor: "rgb(243, 243, 243)",
    plot_bgcolor: "rgb(243, 243, 243)",

    //图表标题
    // title: "layout",
    title: {
      text: "TITLE",
      standoff: 30, //距离
    },
    titlefont: {
      family: "Arial, sans-serif",
      size: 18,
      color: "lightgrey",
    },

    //hover
    hovermode: "closest",
    hoverlabel: { bgcolor: "#FFF" },

    //图例
    showlegend: true,
    legend: { orientation: "h", y: 1.15, x: 0.4 },

    //x轴
    xaxis: {
      // type: 'log', //对数轴
      // type: 'category',//类目轴
      // type: 'date', //日期轴

      //grid、0刻线、外框线
      showgrid: false, //是否显示图表x轴网络线
      gridcolor: "#bdbdbd",
      gridwidth: 1,
      zeroline: true, //是否显示图表x轴0线
      zerolinecolor: "#969696",
      zerolinewidth: 2,
      showline: false, //是否显示图表x轴外框线
      linecolor: "#636363",
      linewidth: 1, //图表外框线宽度

      title: {
        text: "X-AXIS",
        standoff: 20,
      },
      titlefont: {
        family: "Arial, sans-serif",
        size: 18,
        color: "lightgrey",
      },

      hoverformat: ".2f",

      automargin: true,

      //x轴刻度
      tickmode: "linear",
      autotick: false,
      ticks: "outside",
      tick0: 0,
      dtick: 0.5,
      ticklen: 4,
      tickwidth: 1,
      tickcolor: "#000",
      tickformat: ".1f%",
      showticklabels: true,
      tickangle: "auto",
      tickfont: {
        family: "Old Standard TT, serif",
        size: 14,
        color: "black",
      },

      //x轴范围
      // range: [-0.5, 9],
      rangemode: "tozero",
      autorange: true,

      //   mirror: "ticks",
    },
    yaxis: {
      showgrid: true,
      gridcolor: "#bdbdbd",
      gridwidth: 1,
      zeroline: true, //是否显示图表y轴0线
      zerolinecolor: "#969696",
      zerolinewidth: 2,
      showline: false, //是否显示图表y轴外框线
      linecolor: "#636363",
      linewidth: 1, //图表外框线宽度

      title: {
        text: "Y-AXIS",
        standoff: 20,
      },
      titlefont: {
        family: "Arial, sans-serif",
        size: 18,
        color: "lightgrey",
      },

      autorange: true,
      rangemode: "nonnegative",

      showticklabels: true,
      tickangle: 45,
      tickfont: {
        family: "Old Standard TT, serif",
        size: 14,
        color: "black",
      },

      //科学计数法
      showexponent: "all",
      exponentformat: "e",
    },
  };
  Plotly.newPlot("myDiv", data, layout);
</script>

<script>
  var trace1 = {
    x: ["2007-01-01", "2007-09-01", "2008-01-01", "2008-09-01", "2009-01-01", "2010-01-01", "2011-01-01", "2011-02-14"],
    y: [5, 3, 6, 4, 4, 7, 8, 5],
    type: "scatter",
  };
  var layout = {
    title: "ticktext",
    xaxis: {
      tickvals: ["2007-01-01", "2007-09-01", "2008-01-01", "2008-09-01", "2009-01-01", "2010-01-01", "2011-01-01", "2011-02-14"],
      ticktext: ["2007", "Financial Crisis Starts", "2008", "Financial Crisis Ends", "2009", "2010", "2011", "IBM wins Jeopardy!"],
    },
  };

  var data = [trace1];
  Plotly.newPlot("myDiv1", data, layout);
</script>

<script>
  var trace0 = {
    x: [0, 1, 1, 0, 0, 1, 1, 2, 2, 3, 3, 2, 2, 3],
    y: [0, 0, 1, 1, 3, 3, 2, 2, 3, 3, 1, 1, 0, 0],
  };

  var trace1 = {
    x: [0, 1, 2, 3],
    y: [1, 2, 4, 8],
    yaxis: "y2",
  };

  var trace2 = {
    x: [1, 10, 100, 10, 1],
    y: [0, 1, 2, 3, 4],
    xaxis: "x2",
    yaxis: "y3",
  };

  var trace3 = {
    x: [1, 100, 30, 80, 1],
    y: [1, 1.5, 2, 2.5, 3],
    xaxis: "x2",
    yaxis: "y4",
  };

  var data = [trace0, trace1, trace2, trace3];

  var layout = {
    title: "fixed-ratio axes",
    xaxis: {
      nticks: 10,
      domain: [0, 0.45],
      title: "shared X axis",
    },
    yaxis: {
      scaleanchor: "x",
      domain: [0, 0.45],
      title: "1:1",
    },
    yaxis2: {
      scaleanchor: "x",
      scaleratio: 0.2,
      domain: [0.55, 1],
      title: "1:5",
    },
    xaxis2: {
      type: "log",
      domain: [0.55, 1],
      anchor: "y3",
      title: "unconstrained log X",
    },
    yaxis3: {
      domain: [0, 0.45],
      anchor: "x2",
      title: "Scale matches ->",
    },
    yaxis4: {
      scaleanchor: "y3",
      domain: [0.55, 1],
      anchor: "x2",
      title: "Scale matches <-",
    },
    showlegend: false,
  };

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

<script>
  var trace1 = {
    x: ["2000-01-01", "2000-01-02", "2000-01-03"],
    y: [4.3, 8.2, 4.1],
    mode: "lines",
    type: "scatter",
    name: "2000",
  };

  var data = [trace1];

  var layout = {
    xaxis: {
      type: "date",
      title: "January Weather",
      tickmode: "linear",
      tick0: "1999-12-30",
      tickformat: "%d %B (%a)\n %Y",
      dtick: 2 * 24 * 60 * 60 * 1000, // milliseconds
    },
    yaxis: {
      title: "Daily Mean Temperature",
    },
    title: "2000 Toronto January Weather",
  };

  Plotly.newPlot("myDiv3", data, layout, { locale: "cn" });
</script>

<script>
  var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var y = [28.8, 28.5, 37, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9];
  var data = [
    {
      x: x,
      y: y,
      type: "scatter",
    },
  ];
  var layout = {
    xaxis: {
      tickmode: "array", // If "array", the placement of the ticks is set via `tickvals` and the tick text is `ticktext`.
      tickvals: [1, 3, 5, 7, 9, 11],
      ticktext: ["One", "Three", "Five", "Seven", "Nine", "Eleven"],
    },
  };

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

<script>
  Plotly.newPlot(
    "myDiv5",
    [
      {
        x: [1, 2, 3],
        y: [2, 1, 2],
      },
    ],
    {
      annotations: [
        {
          xref: "paper",
          yref: "paper",
          x: 0,
          xanchor: "right",
          y: 1,
          yanchor: "bottom",
          text: "X axis label",
          showarrow: false,
        },
        {
          xref: "paper",
          yref: "paper",
          x: 1,
          xanchor: "left",
          y: 0,
          yanchor: "top",
          text: "Y axis label",
          showarrow: false,
        },
      ],
    }
  );
</script>