Javascript 使用可拖动的jqplot绘制图形_Javascript_Jquery_Html_Css_Html5 Canvas

Javascript 使用可拖动的jqplot绘制图形

javascript jquery html css html5-canvas

Javascript 使用可拖动的jqplot绘制图形,javascript,jquery,html,css,html5-canvas,Javascript,Jquery,Html,Css,Html5 Canvas,我正在使用jqplot，我想得到以下答案。当我拖动点，然后自动更改图形。任何一个有解决方案？？？？我只想显示两点但我得到以下输出这是我的代码，任何人都有解决方案 <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquer

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

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

<!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>


#图表1{
边缘顶端：5em；
左边距：1.5em；
}
var chartNumberTicks=8；
var-s1；
$（文档）.ready（函数（）{
s1=['2014'，1000000]，'2015'，968526]，'2016'，933905]，'2017'，895822]，'2018'，853930]，'2019'，807849]，'2020'，757161]，'2021'，701403]，'2022'，640069]，'2023'，5726003]，'2025'，416754]，'2026'，326956]，'2027'，228178]，'2028'，119522]，'2029'，0]；
plotpoints（）；
$（“#图表1”）.bind（'jqplotDataClick'，函数（ev、SerieIndex、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-01-03'，22901-01-03'，1088-03]，'，['2029-01-03',0]];
plotpoints（）；
}
);
});
函数plotpoints（）{
$.jqplot.config.enablePlugins=true；
plot1=$.jqplot（'chart1'，[s1]{
标题：“”，
轴：{在此处输入代码
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
选择：{
格式字符串：“%y”
},
numberTicks：chartNumberTicks
},
亚克斯：{
选项：{
格式化字符串：“%d”
}，间隔时间：100000，最大值：1200000，最小值：-100000
}
}   
});
}