使用浮点数的图形显示问题答案

【问题标题】：Graph display issue using flot使用浮点数的图形显示问题
【发布时间】：2016-01-27 20:03:18
【问题描述】：

我是全新的flot。起初我想在同一页面中显示三个图表（d1，d2，d3）数据，然后当我点击新图表按钮时，第一个图表（d1）将隐藏，新图表（d4）将插入三个图表（d2 ,d3,d4) 将显示并继续该过程。但问题是图表没有显示。如果我在函数下使用随机数据，那么它会显示图表like this，但是当我尝试使用不同的变量时，图表没有显示。我该如何解决这个问题？

这是我的代码：

<html>
    <head>
        <title>Graph</title>
        <style>
            div.placeholder {
                width: 400px;
                height: 200px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="jquery.flot.js"></script>
        <script type="text/javascript">
            function getdata(){
                var d1 = [[0,1],[1,4],[2,4],[3,8],[4,2],[5,11],[6,19]];
                var d2 = [[7,1],[8,5],[9,4],[10,13],[11,2],[12,11],[13,19]];
                var d3 = [[14,10],[15,4],[16,14],[17,8],[18,2],[19,1],[20,19]];
                var d4 = [[21,4],[22,11],[23,18],[24,12],[25,1],[26,19],[27,8]];
                var d5 = [[28,5],[29,14],[30,13],[31,2],[32,11],[33,9]];
            }
            $(document).ready(function () {
                getdata();
                var dataset1 = [{ 
                    label: "Day1", 
                    data: d1, 
                    points: { symbol: "triangle" }
                }];
                var dataset2 = [{
                    label: "Day2",
                    data: d2,
                    points: { symbol: "cross" }
                }];
                var dataset3 = [{
                    label: "Day3",
                    data: d3,
                    points: { symbol: "square" }
                }];
                var dataset4 = [{
                    label: "Day4",
                    data: d4,
                    points: { symbol: "diamond" }
                }];
                var dataset5 = [{
                    label: "Day5",
                    data: d5,
                    points: { symbol: "circle", color: "black" }
                }];

                for(var i = 1, j = 0; i < dataset.length, j < $('div.placeholder').length; i++, j++){
                    $.plot("div.placeholder:eq("+j+")"),[dataset("+i+")];
                }
                function update() {
                    $('div.placeholder:visible:first').hide();
                    $('div.placeholder:last').after($('<div>').addClass('placeholder'));
                    $.plot("div.placeholder:last", [getdata()]); 
                }
                $('#btn').on('click', update);
            });
        </script>
    </head>

    <body>
        DAY 1<div class="placeholder"></div>
        DAY 2<div class="placeholder"></div>
        DAY 3<div class="placeholder"></div>
        <input id="btn" type="button" value=" New Chart " />
    </body>
</html>

【问题讨论】：

标签： javascript jquery flot

【解决方案1】：

您的代码存在多个问题，其中大部分不是 Flot 特有的：

d1... 数组是 getdata() 函数的本地数组，没有在您尝试使用它们的地方定义
您在 for 循环中像数组一样使用 dataset，但没有定义这样的变量
您对plot() 方法的调用毫无意义，您无法访问这样的变量：$.plot("div.placeholder:eq(" + j + ")"), [dataset("+i+")];
在 update() 函数中对 plot() 的调用尝试使用原始数据，而不是您标记的数据（但由于上述第 1 点而失败）。

这里是fiddle，大部分问题已修复。更新时仍然无法处理图表上方的标题，并且在更新两次以上（当您的数据用完时）后会出现错误。

【讨论】：

还有一个小查询。当我试图在不使用任何按钮的情况下获取这些图形并希望它自动更新时。但它开始从 d2 图形显示到 d8 图形。第一次交换 1 个图形，然后交换 2 个图形，然后继续。我该如何解决这个问题？这是fiddle。我怎样才能从 d1 到 d7 图表，然后交换 1 by 1 图表，当没有数据时，停在那里....
我正在尝试使用 refresh '' 获取最后 3 个图形，以每 7 秒自动刷新一次页面。但是当我刷新它从头开始显示并逐个交换 1。我的目标是即使在刷新后我也想获得最后 3 个图形。因为我有 5 个数据，它必须只显示最后 3 个数据图形（d3、d4、d5）和即使刷新后它也必须显示（d3，d4，d5）不是从头开始但是当我在刷新后插入 d6 数据时，它必须显示 d4，d5，d6。小提琴 meta 不接受，显示错误.直到我得到d7数据，即使刷新后它也必须显示d4-d6
你应该使用 AJAX 来获取新数据，看看这方面的其他一些 Flot 问题，例如this（如果你有新问题，请打开一个新问题）。