[jqplot]拖动时获取点索引 [英] [jqplot]Get the point index when dragged
本文介绍了[jqplot]拖动时获取点索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有什么方法可以在JQPlot中获取拖动点的索引吗? 我想在移动点时更改pointLabel值.我知道JQPlot本身会执行此操作，但只能使用整数.或者我使用十进制值.
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.
我正在尝试:
$("#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轴值外，没有一个参数给我当前点的位置(在数组中).
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 ?
谢谢:-)
推荐答案
尝试一下....
<!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>
这篇关于[jqplot]拖动时获取点索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
