绘图使用jqplot和draggable

时间:2014-05-07 07:27:59

标签: javascript jquery html5 css3 html5-canvas

我正在使用jqplot我想要以下回答。当我拖动点然后自动更改图形。任何一个有解决方案????  enter image description here   我想只显示两点   但我得到以下输出   enter image description here

这是我的代码,任何人都有解决方案

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<style>
#chart1{
    margin-top:5em;
    margin-left:1.5em;
}
</style>
</head>
<body>
<div class="example-plot" id="chart1"></div>  
<div id="d1"></div>
<div id="d2"></div>
    <script type="text/javascript"> 
    var chartNumberTicks=8;
    var s1;
$(document).ready(function () { 
    s1 = [['2014',1000000],['2015', 968526],['2016', 933905],['2017',895822],['2018', 853930],['2019', 807849],['2020', 757161],['2021', 701403],['2022', 640069],['2023', 572603],['2024', 498389],['2025',416754],['2026',326956],['2027',228178],['2028',119522],['2029',0]];
    plotpoints();     
    $('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data) {
            s1 = [['2014-02-04',900000],['2015-01-02', 858526],['2016-01-03', 833905],['2017-01-04',795822],['2018-01-01', 753930],['2019-01-02', 607849],['2020-01-03', 557161],['2021-01-04', 501403],['2022-01-01', 440069],['2023-01-02', 372603],['2024-01-03', 358389],['2025-01-03',316754],['2026-01-03',229996],['2027-01-03',208178],['2028-01-03',108178],['2029-01-03',0]];
            plotpoints();
        }
    );
});
function  plotpoints(){ 
  $.jqplot.config.enablePlugins = true; 
  plot1 = $.jqplot('chart1',[s1],{
     title: '',
     axes: {enter code here
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                formatString: '%y'
             },
             numberTicks:chartNumberTicks
         },
         yaxis: {
             tickOptions: {             
                 formatString: '%d'             
             }, tickInterval: 100000,max:1200000,min:-100000            
         }
     }   
    });
  }

</script>   
</body>
</html>

0 个答案:

没有答案