jQuery Flot：如何在背景图像上绘制图形？答案

【问题标题】：jQuery Flot: how to plot graph on top of background image?jQuery Flot：如何在背景图像上绘制图形？
【发布时间】：2012-02-23 06:01:10
【问题描述】：

如何在背景图像上绘制图表？

我尝试了几种方法，但没有任何效果。啊 ;)

下面的代码只显示图像，但没有图表。怎么会？也许是因为图形是在图像后面绘制的？我希望我能得到一些帮助。

提前致谢。

var data = [ [ ["overview_track_v2.png", -36627, -72447, 35374, 109983] ] , [ [-36627, 35374 ], [-72447, 109983] ] ];

   var options = {
                series: { images: { show: true } },
                xaxis: { min: -36627, max: 35374 },
                yaxis: { min: -72447, max: 109983 },
                lines: { show: true },
                grid: { hoverable: true, clickable: true },

            };

            var graph = $.plot.image.loadDataImages(data, options, function () {
                $.plot($("#graphPosition"), data, options);
            });

【问题讨论】：

这不是图像插件所做的——它用于将网格添加到预渲染的图形中。即您的图像将成为图表。 Flot 所做的只是添加轴。
好的。感谢您提供此信息。

标签： jquery flot

【解决方案1】：

一个简单的方法就是将图像作为 Flot 占位符的 DIV 的背景，并确保网格没有背景颜色。

【讨论】：

这是真的，而且很容易做到。但作为仅供参考，如果您使用其他插件，例如将浮动保存为图像的功能，则不包括背景。

【解决方案2】：

恐怕评论者错了。我相信这就是你想要的：

var data = [ 
            [["overview_track_v2.png", -36627, -72447, 35374, 109983]],
            { data: [[-36627, 35374 ], [-72447, 109983]]], 
              images: {show: false}, bars: {show: false}, points: {show: false}}
           ];

或者，为了更清楚地说明发生了什么：

var data = [ 
            { data: [["overview_track_v2.png", -36627, -72447, 35374, 109983]],
              images: {show: true}, bars: {show: false}, points: {show: false}, lines: {show: false}},
            { data: [[-36627, 35374 ], [-72447, 109983]]], 
              images: {show: false}, bars: {show: false}, points: {show: false}, lines: {show: true}}
           ];

【讨论】：