浮动图表。使可见图表适应 y 轴答案

【问题标题】：Flot charts. Adapt visible chart to the yaxis浮动图表。使可见图表适应 y 轴
【发布时间】：2016-12-14 18:37:06
【问题描述】：

当我将图表拖过 x 轴时，是否可以将图表中的可见数据调整到 Y 轴？

在实际示例中，我可以将图表拖过 X 轴，但图表不适应 Y 轴。 y min 和 y max 选项是相同的，并且针对所有图表进行计算。

http://plnkr.co/edit/Yulri34tqD80vLFHHGsD?p=preview

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples: Real-time updates</title>
    <link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.navigate.js"></script>




    <script type="text/javascript">

    $(function() {

        // We use an inline data source in the example, usually data would
        // be fetched from a server

        var data = [],
            totalPoints = 300;
            var xx = 0;

        function getRandomData() {

            if (data.length > 0)
                data = data.slice(1);
            // Do a random walk
            while (data.length < totalPoints) {

                var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

                if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
                data.push(y);
            }

            // Zip the generated y values with the x values
            var res = [];
            for (var i = 0; i < data.length; ++i) {
                res.push([i, data[i]]); ++xx;
            }

            return res;
        }

        // Set up the control widget

        var updateInterval = 500;


        var plot = $.plot("#placeholder", [ getRandomData() ], {
            series: {
                shadowSize: 0   // Drawing is faster without shadows
            },
            yaxis: {min: 0,max: 100},
            xaxis: {
                min: 100,max: 200,
                zoomRange: [0, 300],
                panRange: [0, 300]
            },
            yaxis: {
                zoomRange: [0, 100], //minimo valor del y data, máximo valor
                panRange: [0, 100]
            },
            crosshair: {
                mode: "xy"
            },          
            zoom: { interactive: true},
            pan: {interactive: true,cursor: "crosshair"}
        });

        function update() {

            plot.setData([getRandomData()]);

            // Since the axes don't change, we don't need to call plot.setupGrid()

            plot.draw();
            setTimeout(update, updateInterval);
        }

        update();

    });

    </script>
</head>
<body>

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>

</body>
</html>

【问题讨论】：

标签： charts flot

【解决方案1】：

看看

Flot charts - changing the y axis on the fly

您可以获取最小值和最大值并像这样设置绘图：

plot.getOptions().yaxes[0].min = 0;
plot.getOptions().yaxes[0].max = yourMAXNOW;

【讨论】：