[英]JqPlot As Image
In the latest JqPlot examples (see here , there are buttons underneath some charts that you can click, and a div slides down with the chart as an image, allowing you to right click and save as. 在最新的JqPlot示例中(请参阅此处 ,您可以单击某些图表下方的按钮,并且div将图表作为图像向下滑动,允许您右键单击并另存为。
I've checked the source and I just can't see myself where this is happening. 我检查了源代码,我只是看不到自己发生了什么。 I've seen various discussions about this (see here however my javascript is basic at best. This is however something I would like to implement in my current project.
我已经看到了关于这个的各种讨论(请参阅此处,但我的javascript是最基本的。但这是我想在我当前的项目中实现的东西。
Is anyone aware of a complete tutorial as to how to do this, ie from the actual jquery code right down to implementation in html code. 是否有人知道如何执行此操作的完整教程,即从实际的jquery代码到html代码中的实现。
Here's the simplest example I can code up: 这是我可以编写的最简单的例子:
//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem); // append the img to the DOM
Mark thanks for your contribution ,Just an Addition sometimes you may have mixed in(included) the cursor and Zoom functionality and you may need to create an image of a section of the graph, hoping to revert back to zoom back to create images of other sections. 谢谢你的贡献,Just a Addition有时你可能混合了(包括)光标和缩放功能,你可能需要创建一个图形的一部分的图像,希望恢复缩放以创建其他图像部分。 this may not be easy since jqPlot will not revert the graph for you to the original plot,so you have to this for yourself manually.
这可能并不容易,因为jqPlot不会将图形还原为原始图表,因此您必须自己手动执行此操作。
My Remedy 我的补救措施
Enrich your $.jqplot options with 用你的$ .jqplot选项丰富
cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }
this allows users to be in a position to revert back to the graphs initial look. 这允许用户能够恢复到图形的初始外观。 if you choose this approach remember to advice your users on how to revert back via an advice note such as
如果您选择这种方法,请记住建议您的用户如何通过建议说明如何恢复
Double click on the Graph to Reset Zoom back to 100%
for usability purposes. 出于可用性目的,
Double click on the Graph to Reset Zoom back to 100%
。
For Those more inclined to Coding Here is a remedy , it includes Some of the code introduced by Mark(Thanks Again) 对于那些更倾向于编码的人来说这是一种补救措施,它包括Mark引入的一些代码(再次感谢)
Create a button right below the graph, furnish it with an id attribute and attach an even handler to its click function, 在图形正下方创建一个按钮,为其提供一个id属性,并为其click函数附加一个偶数处理程序,
<button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>
attach an event listener and implement/register a handler like this 附加一个事件监听器并实现/注册这样的处理程序
$('#show_revert_graph_btn').click(function(){ // simulating a double click on the canvas // not that the selecting expression includes // the div id of where i chose to plot the chart "chart104" and the default class // provided to the canvas holding my chart ie "canvas.jqplot-event-canvas" // then i double click it $('#chart104 canvas.jqplot-event-canvas').dblclick(); });
Image Creation after zoom In my application i needed to create multiple images, out of different portions of the chart, so zoom allows me to magnify this parts, and the canvas to image functionality allows me to save the current data being shown in the canvas after i have zoomed in on a point. 缩放后的图像创建在我的应用程序中,我需要从图表的不同部分创建多个图像,因此缩放允许我放大这些部分,并且画布到图像功能允许我保存画布中显示的当前数据我放大了一点。 challenge was,how to reload my new zoom point as a new image for copying Remedy
挑战是,如何重新加载我的新缩放点作为复制 Remedy 的新图像
$('#show_plotted_image_btn').toggle( function(){ console.log('showing graph'); // get the image function genImg(){ var imgData = $('#chart104').jqplotToImageStr({}); // given the div id of your plot, get the img data var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it $('#plotted_image_div').empty(); // remove the old graph $('#plotted_image_div').append(imgElem); }; genImg(); // show the image $('#plotted_image_div').css('display','block'); }, function(){ // hide the image console.log('hiding graph'); $('#plotted_image_div').css('display','none'); } );
*In My implementation i only wanted to show the latest image,hence every time i ask for a new image i get rid of the old one via $('#plotted_image_div').empty();, which is simply emptying the old image and then appending the new one. *在我的实现中,我只想显示最新的图像,因此每当我要求新图像时,我都会通过$('#mapped_image_div')摆脱旧图像。空();,这只是清空旧图像然后附加新的。 *
*
* Here is my HTML for those who may need further clarity * * 这是我的HTML,可能需要进一步明确*
<div id="chart104" class=""></div> <button id="show_plotted_image_btn" class="jqplot-image-button">View Plot Image</button> <span style="font-weight: bold; color:#FC2896;"> Double click on the Graph to Reset Zoom back to 100%</span> <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button> <div id="plotted_image_div" class="" style="display: none;"></div>
Good Luck
祝好运
It looks like they're using a feature of Canvas to render to an image: 看起来他们正在使用Canvas的一个功能来渲染图像:
https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js
When you got problems with the image output you have to change the jquery.jqplot.js
. 当您遇到图像输出问题时,您必须更改
jquery.jqplot.js
。 On some browsers the script stops of infinte loop (Chrome and Firefox). 在某些浏览器上,脚本停止了infinte循环(Chrome和Firefox)。
change this code: 更改此代码:
for (var i=0; i<wl; i++) {
w += words[i];
if (context.measureText(w).width > tagwidth) {
breaks.push(i);
w = '';
i--;
}
}
to this: 对此:
for (var i=0; i<wl; i++) {
w += words[i];
if (context.measureText(w).width > tagwidth && w.length > words[i].length) {
breaks.push(i);
w = '';
i--;
}
}
add this to your html: 将此添加到您的HTML:
<div id="chart"></div>
<div id="imgChart"></div>
and this to jquery after your jqplot-code: 这是你的jqplot代码之后的jquery:
$(document).ready(function(){
//after creating your plot do
var imgData = $('#chart').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart').append(imgElem); //
});
This solution worked well for me. 这个解决方案对我很有用。 Simple and quick.
简单快捷。
//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem); //
I am using primefaces 3.2 and hence dont have the ability to use the new feature available in primefaces 我正在使用primefaces 3.2,因此没有能力使用primefaces中提供的新功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.