Question

到目前为止，这是我的代码。我可以看到选择矩形，但不会进行缩放。我做错了什么？

    function Plot(container, data) {
        this.options = {
            lines: {
                    show: true
                },
            points: {
                show: true
            },
            xaxis: {
                tickDecimals: 0,
                tickSize: 1
            },
            selection: { mode: "xy" }
        }
        console.log("script is running")

        this.data = []
        this.container = container;

        this.plot = $.plot(container, this.data, this.options);
        this.url = '/sensor/oscillogram_debug_data/'+110;

        this.container.bind("plotselected", this.zoom);
        this.zoom = function(event, reanges) {
            if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
                ranges.xaxis.to = ranges.xaxis.from + 0.00001;
            if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
                ranges.yaxis.to = ranges.yaxis.from + 0.00001;

            this.plot = $.plot(this.container, this.plot.getData(),
                          $.extend(true, {}, this.options, {
                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                              yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
                          }));
        }


    }

    var plot = new Plot($("#output_plot_container"));

    var updateChart = function() {
        $.getJSON(plot.url, function(newdata) {
             for (var f_id in newdata)
                if (newdata.hasOwnProperty(f_id)) {
                    if (f_id='demodulated') {
//                        plot.plot.setData([newdata[f_id]])
//                        plot.plot.setupGrid()
//                        plot.plot.draw()
                    }

                }
        })
    }

Answer 1

这里有一些问题：

1。）你在this.zoom存在之前绑定它，反转那些调用（注意错误＆＃34; reanges＆＃34;）：

 this.zoom = function(event, ranges) {
 ....
 this.container.bind("plotselected", this.zoom);

2。）你在this.zoom范围内尝试某种OO范围只是不起作用。一旦该函数被绑定，它就无法访问它的父范围。如果您希望this在绑定中可用，则可以将其作为eventData传递：

this.container.bind("plotselected", {obj: this}, this.zoom); // and replace the this in this.zoom with obj

这是一个有效的fiddle。

如何在javascript中使用flot库创建可缩放的绘图对象？

1 个答案: