Question

我正在使用dygraphs.js来显示图表。最初仅显示整个数据的子集，并且在放大时加载更详细的数据。

我在ZoomCallback中对服务器进行ajax调用以获取详细数据，然后再次初始化图形对象并缩放到dateWindow。我面临着这种缩放功能的问题。问题是缩放第一次工作并且看到详细数据但是如果我再次缩放缩放数据，则缩放回调的minX和maxX未被正确捕获，因此我从服务器加载的数据失败并且没有看到任何内容图表

这是我的javascript代码

function drawChart(data, myMinX, myMaxX) {
var dateWindow = null;
var drawPoints = $('#draw-points').prop('checked');
if (myMinX != undefined || myMinX != null)
    dateWindow = [myMinX, myMaxX];

$("#myMinX").val("");
$("#myMaxX").val("");
$("#isZoomed").val(false);

g = new Dygraph(document.getElementById("linechart_material"),
                    data,
                    {
                        showRangeSelector: false,
                        connectSeparatedPoints: true,
                        drawPoints: drawPoints,
                        zoomCallback: function (minX, maxX, yRanges) {


                                console.log("Zoomed to [", minX, ", ", maxX, "] -> Y-Range: ", yRanges[0]);
                                $("#isZoomed").val(true);
                                $("#myMinX").val(minX);
                                $("#myMaxX").val(maxX);

                                OnSubmit(null);

                        },
                        pointSize: 5,
                        highlightCircleSize: 10,
                        series: {
                            Original: {
                                drawPointCallback: pointShape,
                                drawHighlightPointCallback: pointShape
                            },
                            Simplified: {
                                drawPointCallback: pointShape,
                                drawHighlightPointCallback: pointShape
                            }
                        },
                        legend: 'always',
                        //colors: ["#A0354C", "#5B9833"]
                        colors: ["#63A0D7", "#ED7D31"],
                        dateWindow: dateWindow
                    });

    var height = $('#linechart_material').height();
    var width = $('#linechart_material').width();
    $('#height').val(height);
    $('#width').val(width);

}



 function OnSubmit(evt) {

 $.ajax({
        type: "POST",
        url: actionUrl,
        contentType: false,
        processData: false,
        data: data,
        success: function (result) {

            if (result != undefined && result != '') {
                session_data = result.Data;

                drawChart(result.Data, minX, maxX)

         }
            $("#isZoomed").val(false);
        },
        error: function (xhr, ajaxOptions, thrownError) {


        }
    });

}

以下是在第一次缩放时在控制台中记录的minX和maxX，然后分别再次放大缩放的图形 Zoom Range

请告诉我如果我在这里做错了什么。

加载有关放大Dygraph的详细数据

0 个答案: