Question

嘿，所以我正在开发一个应用程序，该应用程序将基于csv数据显示某些绘图，并使用plotly js api。我发现，当用户尝试创建一吨点（大于1000左右）的散点图时，确实会减慢用户的浏览器速度。因此，如果它们提供的数据超过某个点的阈值，我想生成一个静态图。

问题是我不确定如何在不首先渲染交互式图的情况下生成静态图。

我尝试修改plotly js api上给出的示例，但无法弄清楚。

我已经创建了一个Codepen here。

这是codepen代码：

Javascript（笔中包含CDN）

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>

谢谢！

Answer 1

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

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

有什么方法可以使用plotly js api在网页上仅绘制静态图像？

1 个答案: