使用flot的图形显示问题

Graph display issue using flot

本文关键字：显示 问题 图形 flot 使用      更新时间：2023-09-26

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

这是我的代码：

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

您的代码存在多个问题，其中大多数问题并非特定于 Flot：

  • d1...数组是 getdata() 函数的本地数组，而不是在您尝试使用它们的外部定义

  • 您在 for 循环中使用dataset就像数组一样，但没有定义这样的变量

  • 你对plot()方法的调用毫无意义，你不能像这样访问变量：$.plot("div.placeholder:eq(" + j + ")"), [dataset("+i+")];

  • 在 update() 函数中调用 plot() 会尝试使用原始数据，而不是标记的数据（但由于上面的第 1 点而失败）。

这是一个小提琴，解决了大多数问题。更新时，它仍然无法处理图表上方的标题，并且在更新两次以上（数据用完时）后出现错误。

相关文章：