2

我正在创建一个非常类似于 StackOverflow 信誉图的浮动图。有一个小图表显示数据的鸟瞰水平，允许您选择一个范围并在更大的图表上显示，缩放。当任一图表悬停时，图例文本将更新以反映该 x 位置的值。

我遇到了两个问题，并且在我的控制台中绝对没有错误，等等......

1：当我在“缩放器”图上选择一个范围时，较大的“细节”图会正确放大，但是当 x 值悬停时导致图例文本更新的代码停止工作。点项鼠标悬停（导致工具提示）仍然有效，并且这两个代码位在同一个事件中。奇怪的。

2：一旦我放大，日期格式就会失控。尽管我timeformat被指定了，但日期会恢复为时间戳（它实际上适用于第一个图，在缩放发生之前）。

我录制了一个简短的截屏视频，以展示实际存在的问题：

http://www.screenr.com/KUX8

我已经设置了一个显示日期/时间格式问题的 JSFiddle。出于某种原因，在那种环境中，没有任何悬停事件按预期工作。

http://jsfiddle.net/Kzg3r/2/

我错过了会导致这两个问题的东西吗？

//doPlot is originally called where ranges=null. This plots the entire universe
//of data on both charts. Once a range is selected, this is called again with
//ranges


var plot=null;
var plot2=null;
var updateLegendTimeout = null;
var latestPosition = null;   
var datasets=null;
var currRange=null;

function doPlot(ranges){
    currRange=ranges;

    clearTimeout(updateLegendTimeout);
    updateLegendTimeout = null;

    var options = { //Options for large graph
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: false, autoHighlight: false, backgroundColor: { colors: ["#fff", "#eee"] }, markings: weekendAreas   },
        xaxis: {mode: 'time', timeformat: "%m/%d", minTickSize: [1, "day"]},
        crosshair: { mode: "x" },
        legend: {
            show: true,
            container: $('#legend'),
            noColumns: 2
        }
    };

    var options2 = {  //options for small zoomer graph
        lines: { show: true },
        points: { show: false },
        grid: { hoverable: true, clickable: true, autoHighlight: false, backgroundColor: { colors: ["#fff", "#eee"] }, markings: weekendAreas   },
        xaxis: {mode: 'time', timeformat: "%m/%d", minTickSize: [1, "month"]},
        crosshair: { mode: "x" },
        selection: { mode: "x" },
        legend: { show: false }
    };    


    if (currRange){ //if there is a range specified, extend options to include it.
        options = $.extend(options, {
            xaxis: { 
                min: currRange.xaxis.from, 
                max: currRange.xaxis.to 
            }
        });

    }

    //Plot Large Graph with (or without) given range
    plot = $.plot($("#placeholder"), datasets,options);


    //plot the zoomer graph, only if it is null (it is set to null before ajax request for new chart)
    if (!plot2) { 
        plot2 = $.plot($("#zoomer"), datasets, options2);


        $("#zoomer").unbind("plotselected").bind("plotselected", function (event, ranges) {

            //unbind/re-bind plotselected event to zoom in when a range is selected
            doPlot(ranges);

        }).unbind("plothover").bind("plothover",  function (event, pos, item) {

            //unbind/re-bind plothover event to to show tooltips and to change legend values
            latestPosition = pos;
            if (!updateLegendTimeout)
                updateLegendTimeout = setTimeout(function(){
                    updateLegend(plot2);
                }, 50);

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    var text = item.series.label.split(' = ');

                    showTooltip(item.pageX, item.pageY,
                                text[0] + ' ('+y+')');
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        });         
    }

    doBinds();          
}


function doBinds(){
    $("#placeholder").unbind("plothover").bind("plothover",  function (event, pos, item) {
        latestPosition = pos;
        if (!updateLegendTimeout)
            updateLegendTimeout = setTimeout(function(){
                updateLegend(plot);
            }, 50);

        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                var text = item.series.label.split(' = ');

                showTooltip(item.pageX, item.pageY,
                            text[0] + ' ('+y+')');
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }    
    });  
}
4

1 回答 1

3

如果选择了范围，则 x 轴上的刻度问题与您在 doPlot 函数中扩展绘图选项的方式有关。您需要使用 `true 作为第一个参数调用 jQuery.extend，以便它执行深层复制。否则，当您使用 x 轴最小值和最大值扩展选项对象时，它会覆盖模式设置为时间的 x 轴对象。用这个替换那个位，它将解决这个问题。

    if (currRange){ //if there is a range specified, extend options to include it.
        options = $.extend(true, options, {
            xaxis: { 
                min: currRange.xaxis.from, 
                max: currRange.xaxis.to 
            }
        });

    }

编辑：

因此，出现第一个问题是因为在重绘图表时删除了图例项并添加了新项。您将原始图例标签的引用存储在准备好的文档中，但是当图表重绘时，这些不再附加到 DOM。您正在更新这些分离元素上的标签，而不是新创建的图例标签。当您像这样更新图例时，尝试重新初始化图例集合：

//THIS IS MOST LIKELY WHERE THE PROBLEM IS OCCURRING!!!!
function updateLegend(thePlot) {
    legends = $('.legendLabel');   
    clearTimeout(updateLegendTimeout);
    updateLegendTimeout = null;

    var pos = latestPosition;

    var axes = thePlot.getAxes();
    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
        pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
        return;

    var i, j, dataset = thePlot.getData();
    for (i = 0; i < dataset.length; ++i) {
        var series = dataset[i];

        // find the nearest points, x-wise
        for (j = 0; j < series.data.length; ++j)
            if (series.data[j][0] > pos.x)
                break;

        // now interpolate
        var y, p1 = series.data[j - 1], p2 = series.data[j];
        if (p1 == null)
            y = p2[1];
        else if (p2 == null)
            y = p1[1];
        else
            y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);

        legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
    }
}
于 2012-05-25T20:20:07.967 回答