[jqplot]Get the point index when dragged

问题

Is there any way to get the index of a dragged point in JQPlot? I want to change the pointLabel value when the point have moved. I know that JQPlot do it itself but only with integer. Or I work with decimal values.

I'm trying this:

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

But none of the parameters give me the current point position (in the array) except x and y axis values.

Is there any way to do this change ?

Thank you :-)

回答1:

try this....

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

回答2:

Ok, I found it in "pixelposition", at xaxis but it is a flaot value. Just need to use Math.round.

来源：https://stackoverflow.com/questions/23480201/jqplotget-the-point-index-when-dragged

标签

javascript

jquery

plot

drag-and-drop

jqplot