Javascript [jqplot]拖动时获取点索引
有没有办法在JQPlot中获取拖动点的索引？ 我想在点移动后更改pointLabel值。我知道JQPlot自己做，但只使用integer。或者我使用十进制值 我正在尝试这个：Javascript [jqplot]拖动时获取点索引,javascript,jquery,plot,drag-and-drop,jqplot,Javascript,Jquery,Plot,Drag And Drop,Jqplot,有没有办法在JQPlot中获取拖动点的索引？ 我想在点移动后更改pointLabel值。我知道JQPlot自己做，但只使用integer。或者我使用十进制值 我正在尝试这个： $("#tooltip2").bind('jqplotDragStop', function (seriesIndex, pointIndex, pixelposition, data) { $(this).find('.jqplot-series-1.jqplot-point-'+pointInd
$("#tooltip2").bind('jqplotDragStop',
function (seriesIndex, pointIndex, pixelposition, data) {
$(this).find('.jqplot-series-1.jqplot-point-'+pointIndex)
.html(''+Math.round(pixelposition.yaxis * 10) / 10);
});
<!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>
#图表1{
边缘顶端：5em；
左边距：2.5em；
}
电磁干扰：
贷款金额：利率：贷款
持续时间（年）：
绘图图
var chartNumberTicks=20；
var-s1；
var getData、totalyear、getYear；
var endYear，startYear；
$（文档）.ready（函数（）{
$.jqplot.config.enablePlugins=true；
s1=[[2014,600000]，[2034,0]]；
绘图仪（s1）；
$（'#chart1'）.bind（'jqplotDataClick'，函数（ev，seriesIndex，pointIndex，data）{
如果（pointIndex==0）{
var year1=Math.ceil（数据[0]）；
var data1=Math.ceil（数据[1]）；
第1年=第1-1年；
s1=[[year1，（data1）]，[2033,10]]；
$（“#txtloanAmount”）.val（数据1）；
$（“#txtLD”）.val（第一年）；
美元（“#txtEMI”）.val（“4500”）；
绘图仪（s1）
}
如果（pointIndex==1）{
var year2=Math.ceil（数据[0]）；
VarData2=Math.ceil（数据[1]）；
第2年=第2-1年；
$（“#txtloanAmount”）.val（数据2）；
$（“#txtLD”）.val（第2年）；
美元（“#txtEMI”）.val（“5500”）；
s1=[[2014年，（500000）]，[year2，0]]；
绘图仪（s1）
}
});
});
$（“#读取数据”）。单击（函数（）{
绘图（）；
});
函数DrawGraph（）{
var readDate=新日期（）；
getYear=readDate.getFullYear（）；
getData=document.getElementById（“txtloanAmount”）.value；
totalyear=document.getElementById（“txtLD”）.value；
endYear=parseInt（getYear）+parseInt（totalyear）；
totalyear=parseInt（totalyear）；
chartNumberTicks=总年份；
//s1=[[1224]、[3672]、[51120]、[152240]；
s1=[（parseInt（getYear）），（parseInt（getData）），[（parseInt（endYear）），0]；
//警报（s1）；
绘图仪（s1）
}
功能图（s1）{
$（'图表1'）。文本（“”）；
变量plot1=$.jqplot（'chart1'，[s1]{
标题：“拖放”，
系列默认值：{
渲染器：$.jqplot.CanvasAxisLabelRenderer，
渲染器选项：{
顺利：是的
},
点标签：{
秀：真的
}
},
轴线：{
xaxis：{
标签：“xaxis”，
min:2014年，
时间间隔：1，
//用于绘制轴的渲染器，
选择：{
格式化字符串：“%d”
}
},
亚克斯：{
标签：“yaxis”，
分:0,，
选择：{
格式化字符串：“%d”
}
}
},
荧光灯：{
SizedJust:7.5
},
光标：{
秀：真的
}
});
}