Git.Storage.Web/Theme/plugins/flot/examples/image.html

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
 </head>
 <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:400px;height:400px;"></div>

    <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
    
    <p>With the image plugin, you can plot images. This is for example
    useful for getting ticks on complex prerendered visualizations.
    Instead of inputting data points, you put in the images and where
    their two opposite corners are supposed to be in plot space.</p>

    <p>Images represent a little further complication because you need
    to make sure they are loaded before you can use them (Flot skips
    incomplete images). The plugin comes with a couple of helpers
    for doing that.</p>

<script type="text/javascript">
$(function () {
    var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
    var options = {
            series: { images: { show: true } },
            xaxis: { min: -8, max: 4 },
            yaxis: { min: -8, max: 4 }
    };

    $.plot.image.loadDataImages(data, options, function () {
        $.plot($("#placeholder"), data, options);
    });
});
</script>

 </body>
</html>