在缩放堆栈条形图后，Flot返回不正确的x值（mm / dd / yy – date）

我想在用户缩放图表并单击特定条形图时获得正确的x轴标签

当点击（02/14/14 – xaxis）上的栏时，警报显示（02/19/14 – xaxis）标签。 当缩放（选择）未触发时，它返回正确的日期。 但在缩放图表并单击栏后，它会填充错误的日期。

我是flot排行榜的新手。 请帮我。 谢谢。

[               $(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); } }); });    
 
 
 
Please click and drag and select a range to zoom Revert to all data
 
 
 
  ][1] 

Answer 1

问题是这行代码：

 var tickClicked = item.series.xaxis.ticks[item.dataIndex+1].label; 

当你的情节没有被解开时，每个数据点（条形）有一个刻度。 但是，当你缩放时，你最终得到的是滴答，所以找到item.dataIndex的勾选是行不通的。

我猜你更关心与条形相关的数据（而不是真正的勾选）所以得到条形x值并将其格式化回日期字符串。

 var tickClicked = $.plot.formatDate(new Date(item.datapoint[0]),"%m/%d/%Y"); 

EDITS

而不是在缩放上进行另一个.plot调用重绘图表（这是我在我的应用程序中使用flot的方式）：

 var opts = plot.getOptions(); opts.xaxes[0].min = ranges.xaxis.from; opts.xaxes[0].max = ranges.xaxis.to; opts.yaxes[0].min = ranges.yaxis.from; opts.yaxes[0].max = ranges.yaxis.to; plot.setupGrid(); plot.draw();