使用 flot 的图形显示问题

Question

我是 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>

Answer 1

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

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

这是一个 fiddle，大部分问题都已修复。更新时它仍然不处理图表上方的标题，并且在更新超过两次后（当您的数据用完时）出现错误。

使用 flot 的图形显示问题

Graph display issue using flot

javascript

jquery

flot