个人中心
gpt4 book ai didi

javascript - [jqplot]获取拖动时的点索引

转载 作者：行者123 更新时间：2023-12-03 12:42:36 25 4
gpt4 key购买 nike

有没有办法获取JQPlot中拖动点的索引？我想在点移动时更改 pointLabel 值。我知道 JQPlot 自己做，但只使用整数。或者我使用十进制值。

我正在尝试这个:

$("#tooltip2").bind('jqplotDragStop',
    function (seriesIndex, pointIndex, pixelposition, data) {
        $(this).find('.jqplot-series-1.jqplot-point-'+pointIndex)
               .html(''+Math.round(pixelposition.yaxis * 10) / 10);
});

但是除了 x 和 y 轴值之外，没有任何参数给我当前点位置(在数组中)。

有什么办法可以做到这一点吗？

谢谢:-)

最佳答案

试试这个......

 <!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="jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<style>
#chart1 {
    margin-top: 5em;
    margin-left: 2.5em;
}
</style>
</head>
<body>
    <div>
        <label id="EMI">EMI:</label><input id="txtEMI" type="text" name="EMI">
        <label>Loan Amount:</label><input id="txtloanAmount" type="text"
            name="loanAmount"> <label>Rate of Interest:</label><input
            id="txtROI" type="text" name="ROI"> <label>Loan
            Duration (in years):</label><input id="txtLD" type="text" name="LD1" />
            <button id="readData" type="button">Plot Graph</button>
    </div>
    <div class="example-plot" id="chart1"></div>
    <div id="d1"></div>
    <div id="d2"></div>
    <script type="text/javascript">     
        var chartNumberTicks = 20;
        var s1;
        var getData, totalyear,getYear;
        var endYear, startYear;
        $(document).ready(function() {
            $.jqplot.config.enablePlugins = true;       
            s1 = [[2014, 600000], [2034, 0]];           
            PlotChart(s1);
            $('#chart1').bind('jqplotDataClick',function(ev, seriesIndex, pointIndex, data) {   
                                if(pointIndex==0){                                  
                                    var year1=Math.ceil(data[0]);
                                    var data1=Math.ceil(data[1]);   
                                    year1=year1-1;  
                                    s1 = [[ year1, (data1) ], [2033, 10 ] ];
                                    $("#txtloanAmount").val(data1); 
                                    $("#txtLD").val(year1);                                     
                                    $("#txtEMI").val("4500");   
                                    PlotChart(s1)
                                }
                                if(pointIndex==1){                              
                                    var year2=Math.ceil(data[0]);
                                    var data2=Math.ceil(data[1]);
                                    year2=year2-1;  
                                    $("#txtloanAmount").val(data2); 
                                    $("#txtLD").val(year2); 
                                    $("#txtEMI").val("5500");                                   
                                    s1 = [ [ 2014, (500000) ], [ year2, 0 ] ];
                                    PlotChart(s1)   
                                }
                            });
        });

    $( "#readData" ).click(function() {         
            DrawGraph();
        });
    function DrawGraph() {  
            var readDate = new Date();
            getYear = readDate.getFullYear();

            getData = document.getElementById("txtloanAmount").value;
            totalyear = document.getElementById("txtLD").value;
            endYear = parseInt(getYear) + parseInt(totalyear);                                  
            totalyear = parseInt(totalyear) ;       
            chartNumberTicks=totalyear;

            //s1 =  [[1, 224], [3, 672], [5, 1120],[15,2240]];
            s1 = [[(parseInt(getYear)),(parseInt(getData))],[(parseInt(endYear)),0]];
            //alert(s1);
            PlotChart(s1)

        }   

    function PlotChart(s1) {
        $('#chart1').text("");          
        var plot1 = $.jqplot('chart1', [s1], {
            title: 'Drag and drop',
            seriesDefaults: {
                renderer: $.jqplot.CanvasAxisLabelRenderer,
                rendererOptions: {
                    smooth: true
                },
                pointLabels: {
                    show: true
                }
            },
            axes: {
                xaxis: {
                    label: 'xaxis', 
                    min:2014,   
                    tickInterval:1,
                    // renderer to use to draw the axis,     
                    tickOptions: {
                        formatString: '%d'
                    }
                },
                yaxis: {
                    label: 'yaxis',
                    min:0,
                    tickOptions: {
                        formatString: '%d'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 7.5
            },
            cursor: {
                show: true
            }
        });
}
    </script>
</body>
</html>

关于javascript - [jqplot]获取拖动时的点索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23480201/

25 4 0
文章推荐： c# - 元素不可见
文章推荐： phantomjs - 如何让 Phantom.js 像普通浏览器一样缓存资源？
文章推荐： colors - d3色标-与多种颜色成线性关系吗？
文章推荐： javascript - 为什么我必须单击两次才能使用 jquery 显示 Div？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com