更新:这里有一个小提琴来演示:http: //jsfiddle.net/MsybN/1/
我正在使用 Flot 的选择图: http ://www.flotcharts.org/flot/examples/selection/index.html
我使用时间作为 x 轴,但是当我拖动以放大到更小的时间间隔时,图表变为空白。在工作示例中,x 轴是基于时间的,但以年为单位,因此在数字上很容易绘制(即 1994.5 是 1994 年的一半)。
我的 xaxis 上有月份年份,例如:“2012 年 7 月”、“2013 年 1 月”、“2013 年 7 月”等,以 6 个月为间隔。我将它与十字准线插件和时间插件结合使用。
缩放不起作用。它正确地获得了毫秒值,但无法将图表设置为它们。代码如下,有人可以帮忙吗?
导入的脚本: jquery.flot.js jquery.flot.time.js jquery.flot.crosshair.js jquery.flot.selection.js
$(function() {
//define datasets
var datasets = {
"blah": {
label: "blah",
key: "blah",
data: []
}, //etc
};
$.each(datasets, function(i, item) {
item.data.push([(time*1000), datapoints]);
});
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
var plot;
var options = {
xaxis: {
timezone: "browser",
mode: "time"
}, series: {
lines: {
show: true
}
}, crosshair: {
mode: "x"
}, grid: {
hoverable: true,
autoHighlight: false
}, selection: {
mode: "x"
}
};
function plotAccordingToChoices() {
var data = [];
//inputs not shown
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key]) {
data.push(datasets[key]);
}
});
if (data.length > 0) {
plot = $.plot("#placeholder", data, options);
}
}
plotAccordingToChoices();
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
var from = Math.ceil(ranges.xaxis.from / 1000);
var to = Math.ceil(ranges.xaxis.to / 1000);
//THIS IS WHERE IT BREAKS
plot = $.plot(placeholder, datasets, $.extend(true, {}, options, {
xaxis: {
min: from,
max: to
}
}));
});
});
</script>