Is there any way to plot a just a static image on a webpage with plotly js api?

Question

Hey so I am developing an app that will display certain plots based on csv data and am using the plotly js api. I have found that when a user tries to create a scatter plot with a ton of points (greater than 1000 or so) it really slows down the user's browser. So I want to generate a static plot if the data that they supply exceeds a certain threshold of points.

The problem is that I am not sure how to generate a static plot without first rendering an interactive plot.

I have tried to modify the example given on the plotly js api , but have not been able to figure it out.

Here is the code:

Javascript (CDN Included in the Pen)

function plot() {
  var d3 = Plotly.d3;
  var img_jpg = d3.select("#jpg-export");

  // Ploting the Graph

  var trace = {
    x: [3, 9, 8, 10, 4, 6, 5],
    y: [5, 7, 6, 7, 8, 9, 8],
    type: "scatter"
  };
  var trace1 = {
    x: [3, 4, 1, 6, 8, 9, 5],
    y: [4, 2, 5, 2, 1, 7, 3],
    type: "scatter"
  };
  var data = [trace, trace1];
  var layout = { title: "Simple Javascript Graph" };
  Plotly.plot("plotly_div", data, layout)

  // static image in jpg format

    .then(function(gd) {
    Plotly.toImage(gd, { height: 300, width: 300 }).then(function(url) {
      img_jpg.attr("src", url);
      return Plotly.toImage(gd, { format: "jpeg", height: 400, width: 400 });
    });
  });
}

HTML

<h1>Interactive Plot</h1>
<div id="plotly_div" />

<h1>Static Plot</h1>
<img id="jpg-export"></img>

<button onclick="plot()">Run the function</button>

Thanks!

Answer 1

我认为您可以将其添加为配置：

Plotly.newPlot('myDiv', data, layout, {staticPlot: true});