Question

我有以下示例：http://jsfiddle.net/ondra15/7mb8K/1/ 我想要两个例子（多轴和缩放）。示例缩放不正确 - 如果我在图表中指示某些数据进行缩放 - 不起作用。没有任何事情发生。

原始缩放（正确）解决方案适用于http://www.flotcharts.org/flot/examples/zooming/index.html

我的代码可以有任何想法吗？谢谢

code

Answer 1

您好我设法使用我找到的here示例中的代码。我也会更新你的jsfiddle：

<script type="text/javascript">
            var datasets = { ... };

            data = null;
            function plotByChoice(doAll) {
                data = [];
                if (doAll != null) {
                    $.each(datasets, function (key, val) {
                        data.push(val);
                    });
                }
                else {
                    $('#legend .legendCB').each(
                        function () {
                            if (this.checked) {
                                data.push(datasets[this.id]);
                            }
                            else {
                                data.push({ label: this.id, data: [] })
                            }
                        }
                    );
                }

                $.plot($("#placeholder"), data, {
                    yaxes: [{ min: 0 }, { position: "right" }],
                    xaxis: { tickDecimals: 0 },
                    legend: {
                        container: legend,
                        labelFormatter: function (label, series) {
                            var cb = '<input class="legendCB" type="checkbox" ';
                            if (series.data.length > 0) {
                                cb += 'checked="true" ';
                            }
                            cb += 'id="' + label + '" /> ';
                            cb += label;
                            return cb;
                        }
                    }, selection: { mode: "x" }
                });

                $('#legend').find("input").click(function () { setTimeout(plotByChoice, 100); });
            }

            plotByChoice(true);

            // Create the overview plot

            var overview = $.plot("#overview", data, {
                legend: {
                    show: false
                },
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1
                    },
                    shadowSize: 0
                },
                xaxis: {
                    ticks: 4
                },
                yaxes: [{ min: 0 }, { position: "right" }],
                grid: {
                    color: "#999"
                },
                selection: {
                    mode: "x"
                }
            });

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

                var options = {
                    series: {
                        lines: { show: true },
                        points: { show: true }
                    },
                    legend: { noColumns: 2 },
                    xaxis: { tickDecimals: 0 },
                    yaxis: { min: 0 },
                    selection: { mode: "x" }
                };

                var placeholder = $("#placeholder");
                placeholder.bind("plotselected", function (event, ranges) {
                    $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));

                    plot = $.plot(placeholder, data,
                                  $.extend(true, {}, options, {
                                      xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                                  }));
                });


                // don't fire event on the overview to prevent eternal loop

                overview.setSelection(ranges, true);
            });

            $("#overview").bind("plotselected", function (event, ranges) {
                plot.setSelection(ranges);
            });

        </script>

FlotChart不起作用缩放模式

1 个答案: