我想在用户缩放图表并单击特定栏时获得正确的 x 轴标签
当单击 (02/14/14 - xaxis) 上的栏时，警报会显示 (02/19/14 - xaxis) 标签。
当缩放（选择）未触发时，它会返回正确的日期。但在缩放图表并单击栏后，它会填充错误的日期。
我是流程图的新手。请帮我。谢谢。
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Stack Zoom Click</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="plot.css" rel="stylesheet" type="text/css">
<link href="master.css" rel="stylesheet" type="text/css">
<!--\[if lte IE 8\]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><!\[endif\]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.valuelabels.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.selection.js"></script>
<script type="text/javascript">
$(function() {
var dataset = \[{
data: \[
\[1391279400000, -588\],\[1391365800000, -1324\],\[1391452200000, -1525\],\[1391538600000, -588\],\[1391625000000, -1525\],\[1391711400000, -588\],
\[1391797800000, -1324\],\[1391884200000, -1525\],\[1391970600000, -588\],\[1392057000000, -1234\],\[1392143400000, -588\],\[1392229800000, -1324\],
\[1392316200000, -1525\],\[1392402600000, -588\],\[1392489000000, -1525\],\[1392575400000, -588\],\[1392661800000, -1324\],\[1392748200000, -1525\],
\[1392834600000, -588\]
\],
color:'#9D538E',
label: "Out"
},
{
data: \[
\[1391279400000, 3221\],\[1391365800000, 2496\],\[1391452200000, 1050\],\[1391538600000, 3221\],\[1391625000000, 1050\],\[1391711400000, 3221\],
\[1391797800000, 2496\],\[1391884200000, 1050\],\[1391970600000, 2221\],\[1392057000000, 1050\],\[1392143400000, 3221\],\[1392229800000, 2496\],
\[1392316200000, 1050\],\[1392402600000, 3221\],\[1392489000000, 1050\],\[1392575400000, 3221\],\[1392661800000, 2496\],\[1392748200000, 1050\],
\[1392834600000, 2221\]
\],
color:'#702BD7',
label: "Intake"
}, {
data: \[
\[1391279400000, 1000\],\[1391365800000, -1000\],\[1391452200000, -475\],\[1391538600000, 1000\],\[1391625000000, -475\],\[1391711400000, 1000\],
\[1391797800000, -1000\],\[1391884200000, -475\],\[1391970600000, 1000\],\[1392057000000, -475\],\[1392143400000, 1000\],\[1392229800000, -1000\],
\[1392316200000, -475\],\[1392402600000, 1000\],\[1392489000000, -475\],\[1392575400000, 1000\],\[1392661800000, -1000\],\[1392748200000, -475\],
\[1392834600000, 1000\]
\],
color:'#2082F2',
label: "Net"
}\];
var plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
timeformat: "%m/%d/%y",
tickSize: \[1, "day"\],
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
var overview = $.plot("#overview", dataset, {
xaxis: {
mode: 'time',
ticks: \[\]
},
yaxis: {
ticks: \[\],
},
series: {
bars: {
fill: 1,
show: true,
},
},
grid: {
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
},
selection: {
mode: "x"
},
legend: {show: false}
});
// now connect the two
$("#placeholder").bind("plotselected", function (event, ranges) {
//Reset Chart resolution dropdown
$(".chartResolution").val("0");
// do the zooming
plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
min: ranges.xaxis.from,
max: ranges.xaxis.to,
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
// don't fire event on the overview to prevent eternal loop
//overview.setSelection(ranges, true);
});
//bind the plotselected function
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
var tickClicked = item.series.xaxis.ticks\[item.dataIndex+1\].label;
alert(tickClicked);
}
});
});
</script>
</head>
<body style="background-color:#222222; color:white;">
<div id="content">
<div class="demo-container" style="margin-top:1%;">
<div id="placeholder" class="demo-placeholder"></div>
<p class="notifyMessage">Please click and drag and select a range to zoom <a href="#" title="Revert to all data" class="buttonCommon revertToAll">Revert to all data</a></p>
<div id="overview" class="psycho" style="width:950px;height:150px;"></div>
</div>
</div>
</body>
</html>][1]
