[jqplot]拖动时获取点索引答案

【问题标题】：[jqplot]Get the point index when dragged[jqplot]拖动时获取点索引
【发布时间】：2014-05-05 19:26:29
【问题描述】：

有什么方法可以获取 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 轴值之外，没有任何参数给我当前点的位置（在数组中）。

有什么办法可以做这个改变吗？

谢谢你:-)

【问题讨论】：

标签： javascript jquery plot drag-and-drop jqplot

【解决方案1】：

试试这个....

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

好的，我在 xaxis 的“pixelposition”中找到了它，但它是一个浮点值。只需要使用 Math.round。

【讨论】：