[英]Is there any way to plot a just a static image on a webpage with plotly js api?
Hey so I am developing an app that will display certain plots based on csv data and am using the plotly js api.嘿,所以我正在开发一个应用程序,它将显示基于 csv 数据的某些图,并且正在使用 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.我发现当用户尝试使用大量点(大于 1000 左右)创建散点图时,它确实会降低用户浏览器的速度。 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.我试图修改plotly js api上给出的示例,但无法弄清楚。
Here is the code:这是代码:
Javascript (CDN Included in the Pen) 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 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!谢谢!
我认为您可以将其添加为配置:
Plotly.newPlot('myDiv', data, layout, {staticPlot: true});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.