个人中心
gpt4 book ai didi

javascript - 使用 flot 的图形显示问题

转载 作者：行者123 更新时间：2023-11-30 00:15:11 25 4
gpt4 key购买 nike

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

最佳答案

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

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

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

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

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

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

关于javascript - 使用 flot 的图形显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35030917/

25 4 0
文章推荐： php - 从表中删除用户
文章推荐： android - 使用 Dagger 2 和 setRetainInstance(true) 时获取 NullPointErexception；
文章推荐： javascript - 无法接收代码
文章推荐： MySql 使用连接时是否绝对需要使用带有列名的表别名？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com