有什么方法可以在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>

07-24 18:28
查看更多