设置在帆布的背景图象在sparkline jquery

时间:2012-03-14 12:59:07

标签: jquery sparklines

我在使用java语言的web应用程序中工作。我需要显示复合迷你图,因此我在jsp页面上使用sparkline jquery。我必须在画布的背景中设置一个图像,其中绘制了迷你图。我正在使用此链接中的sparkline jquery。

http://omnipotent.net/jquery.sparkline/

我写的代码是

  var data1 = [ - 10,10,9,-9,7,-5,9,-8,3,0,3,-8,4,-7];   var data2 = [ - 10,0,6,-9,7,-5,9,-3,7,0,3,-8,4,-2];       $('#id')。sparkline(data1,{type:'line',normalRangeMin:0,normalRangeMax:0,spotRadius:'0',width:'630px',height:'100px',composite:true,fillColor :false,lineColor:'green'}); $('#id')。sparkline(data2,{type:'line',normalRangeMin:0,normalRangeMax:0,spotRadius:'0',width:'630px',height:'100px',composite:true,fillColor :false,lineColor:'red'});

并且在体内    

以上jquery允许我绘制复合线图,但是当我在标签上设置样式(背景图像)时,它不会在sparklines canvas的背景中显示它,因为它自己添加了canvas。我的问题是将背景图像正好显示在迷你图画布后面。

为了解决上述问题,我尝试了许多其他jqueries,如:

http://willarson.com/code/sparklines/sparklines.html

这适用于在画布上设置背景图像,但不允许使用复合线图。

而另一个是

http://benpickles.github.com/peity/

我也有同样的问题。这也不适用于复合线图。

请给我你宝贵的建议,将背景图像正好设置在迷你画布的第一个jquery链接后面,或者使用其他两个链接绘制复合线图的方法,或者如果有另一个jquery可以让我设置背景 - 在迷你图画布上的图像并支持复合线图。

我提前感谢您提出的所有宝贵建议。

1 个答案:

答案 0 :(得分:0)

现在我找到了将背景图像正好放在画布后面并在上面绘制复合线图的方法。

我在这个链接中使用了sparklines.js。 http://willarson.com/code/sparklines/sparklines.html

根据给定的文档,我们必须致电 新的Sparkline('canvas_id','data','opts')。draw(); 接受canvas_id作为一个参数的函数。我使用相同的canvas_id调用相同的函数两次以绘制两条不同的行(或者您可以调用此脚本接受的任何其他类型的图形)。

第二个调用在第一个调用的顶部绘制另一个图表。(这与http://omnipotent.net/jquery.sparkline/脚本用于绘制复合图形的方式相同)。这有助于我绘制一个复合图。函数调用如下所示:

new Sparkline('canvas_id','data1','opts1')。draw(); 新的Sparkline('canvas_id','data2','opts2')。draw();

并且用于在canvas后面设置背景图像我在canvas标签中设置样式。  

以上解决方案对我来说工作正常,以获得适当的结果。如果有人找到更好的答案。请发布。

由于