Question

更新：这是一个小提琴演示： http://jsfiddle.net/MsybN/1/

我正在使用Flot的选择图： http://www.flotcharts.org/flot/examples/selection/index.html

我使用时间作为x轴，但是当我拖动以放大到较小的时间间隔时，图形变为空白。在工作示例中，xaxis是基于时间的，但是在几年内，因此在数字上很容易绘图（即1994年是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>

Answer 1

（基于解决小提琴中的问题而更新）

有三个问题：

主要问题是你没有使用相同的代码在plotselected回调中重新绘制原始绘图。 plotAcordingToChoices函数构建一个包含数据集对象的数据系列的新数组。 plotselected回调只是传递'数据集'本身，这是无效的。

在您的原始代码段中很难看到，因为您省略了这些行。
如前所述，你错误地将'from'和'to'除以1000;你应该按原样使用范围值。
十字准线不起作用，因为在您的plothover回调中未定义updateLegend。当您在绘图上移动鼠标时，会反复失败，阻挡十字准线。

我已经更新了小提琴以进行演示。

如何在xaxis上使用Flot的选择图随时间变化？

1 个答案: