如何在 x 轴上使用 Flot 的选择图和时间？

Question

更新：这是一个演示： 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>

Answer 1

（根据解决Fiddle中的问题更新）

存在三个问题：

1. 主要问题是您没有使用与最初绘制相同的代码在 plotselected 回调中重新绘制。 plotAccordingToChoices 函数构建一个新数组，其中包含来自 datasets 对象的数据系列。 plotselected 回调只是传入“数据集”本身，这是无效的。

   这在您的原始代码 sn-p 中很难看到，因为您省略了这些行。

2. 如前所述，您错误地将 'from' 和 'to' 除以 1000；您应该按原样使用范围值。

3. 十字准线不起作用，因为在您的 plothover 回调中未定义 updateLegend。当您将鼠标移过绘图时，此操作反复失败，挡住了十字准线。

我已经更新了 Fiddle 来演示。