javascript - jQuery Flot 库的类别插件不起作用-6ren

javascript - jQuery Flot 库的类别插件不起作用

转载作者：行者123 更新时间：2023-11-30 10:11:28

我正在使用 jQuery Flot 库制作图表，其中 x 轴包含文本单位(月)而不是数字。所以我使用 Flot 的类别插件并从其主要网站克隆示例代码。但是月份不显示，只显示条形图。代码如下:

代码片段出现问题是在注释 block “站点统计图表”之间。我上传完整的代码只是为了让你们都知道我在做什么，并且可以检测其他部分是否存在影响此代码片段的问题。

Flot类别下载自http://www.flotcharts.org/flot/jquery.flot.categories.js

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectDashboard.aspx.cs" Inherits="SELPORTAL.project.ProjectDashboard" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Project Dashboard</title>

    <script type="text/javascript">

        pageSetUp();

        loadScript("js/plugin/flot/jquery.flot.cust.js", loadFlotResize);

        function loadFlotResize() {
            loadScript("js/plugin/flot/jquery.flot.resize.js", loadFlotFillbetween);
        }
        function loadFlotFillbetween() {
            loadScript("js/plugin/flot/jquery.flot.fillbetween.js", loadFlotOrderBar);
        }
        function loadFlotOrderBar() {
            loadScript("js/plugin/flot/jquery.flot.orderBar.js", loadFlotPie);
        }
        function loadFlotPie() {
            loadScript("js/plugin/flot/jquery.flot.pie.js", loadFlotCategories);
        }
        function loadFlotCategories() {
            loadScript("js/plugin/flot/jquery.flot.categories.js", loadDebug);
        }
        function loadDebug() {
            loadScript("js/plugin/flot/jquery.flot.debug.js", loadFlotToolTip);
        }
        function loadFlotToolTip() {
            loadScript("js/plugin/flot/jquery.flot.tooltip.js", generateAllFlotCharts);
        }

        /* chart colors default */
        var $chrt_border_color = "#efefef";
        var $chrt_grid_color = "#DDD"
        var $chrt_main = "#E24913";         /* red       */
        var $chrt_second = "#6595b4";       /* blue      */
        var $chrt_third = "#FF9F01";        /* orange    */
        var $chrt_fourth = "#7e9d3a";       /* green     */
        var $chrt_fifth = "#BD362F";        /* dark red  */
        var $chrt_mono = "#000";

        var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        var categories = {};
        var ongoingProjects = [];
        var issues = {};

        $(function () {
            var jsonData = $("#projectsYearCategory").val();
            parseDataReceived(jsonData);
            fillOngoingTable();
        });


        function parseDataReceived(json) {
            var obj = JSON.parse(json);

            categories = obj.allProjects;
            ongoingProjects = obj.ongoingProjects;
            issues = obj.issues;

            for (var i = 0; i < ongoingProjects.length; i++) {
                ongoingProjects[i].deadline = getDateFromJsonDate(ongoingProjects[i].deadline);
            }

            for (var category in issues) {
                for (var i = 0; i < issues[category].length; i++) {
                    issues[category][i] = [getTickDateString(getDateFromJsonDate(issues[category][i].Item1)), issues[category][i].Item2];
                }
            }

            console.log(categories);
            console.log(ongoingProjects);
            console.log(issues);
        }

        function getDateFromJsonDate(d) {
            return new Date(parseInt(d.substr(6)));
        }

        function getDateString(d) {
            return (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
        }

        function getTickDateString(d) {
            return MONTH_NAMES[d.getMonth()] + "-" + d.getFullYear();
        }

        function fillOngoingTable() {
            var tblBody = $('#tbl_ongoing tbody');

            for (var i = 0; i < ongoingProjects.length; i++) {
                var row = $('<tr>');
                row.append($('<td>').text(ongoingProjects[i].name));
                row.append($('<td>').text(ongoingProjects[i].model));
                row.append($('<td>').text(ongoingProjects[i].grade));
                row.append($('<td>').text(getDateString(ongoingProjects[i].deadline)));

                tblBody.append(row);
            }
        }

        function generateAllFlotCharts() {
            for (var category in categories) {
                var projects = categories[category];

                var ongoing = [];
                var upcoming = [];
                var completed = [];
                var drop = [];

                for (var year in projects) {
                    ongoing.push([year, projects[year]["Ongoing"]]);
                    upcoming.push([year, projects[year]['Upcoming']]);
                    completed.push([year, projects[year]['Completed']]);
                    drop.push([year, projects[year]['Drop']]);
                }

                var ds = new Array();

                ds.push({
                    data: ongoing,
                    label: "Ongoing",
                    bars: {
                        show: true,
                        barWidth: 0.1,
                        order: 1,
                    }
                });
                ds.push({
                    data: upcoming,
                    label: "Upcoming",
                    bars: {
                        show: true,
                        barWidth: 0.1,
                        order: 2,
                    }
                });
                ds.push({
                    data: completed,
                    label: "Completed",
                    bars: {
                        show: true,
                        barWidth: 0.1,
                        order: 3,
                    }
                });
                ds.push({
                    data: drop,
                    label: "Drop",
                    bars: {
                        show: true,
                        barWidth: 0.1,
                        order: 4,
                    }
                });

                //Display graph
                $.plot($("#bar-chart-" + category.toLowerCase()), ds, {
                    colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
                    grid: {
                        show: true,
                        hoverable: true,
                        clickable: true,
                        tickColor: $chrt_border_color,
                        borderWidth: 0,
                        borderColor: $chrt_border_color,
                    },
                    legend: true,
                    xaxis: {
                        tickDecimals: 0,
                    },
                    yaxis: {
                        tickDecimals: 0,
                        min: 0,
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "<span>%s: %y project(s)</span>",
                        defaultTheme: false
                    }
                });
            }

            /* pie chart */

            if ($('#pie-chart').length) {

                var data_pie = [];
                var series = Math.floor(Math.random() * 10) + 1;
                for (var i = 0; i < series; i++) {
                    data_pie[i] = {
                        label: "Series" + (i + 1),
                        data: Math.floor(Math.random() * 100) + 1
                    }
                }

                $.plot($("#pie-chart"), data_pie, {
                    series: {
                        pie: {
                            show: true,
                            innerRadius: 0.5,
                            radius: 1,
                            label: {
                                show: false,
                                radius: 2 / 3,
                                formatter: function (label, series) {
                                    return '<div style="font-size:11px;text-align:center;padding:4px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                                },
                                threshold: 0.1
                            }
                        }
                    },
                    legend: {
                        show: true,
                        noColumns: 1, // number of colums in legend table
                        labelFormatter: null, // fn: string -> string
                        labelBoxBorderColor: "#000", // border color for the little label boxes
                        container: null, // container (as jQuery object) to put legend in, null means default on top of graph
                        position: "ne", // position of default legend container within plot
                        margin: [5, 10], // distance from grid edge to default legend container within plot
                        backgroundColor: "#efefef", // null means auto-detect
                        backgroundOpacity: 1 // set to 0 to avoid background
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                });

            }

            /* end pie chart */

            /* site stats chart */

            if ($("#line-chart-issues").length) {

                var issuesSDK = issues["SDK"];
                var issuesMobile = issues["Mobile"];
                var issuesCamera = issues["Camera"];

                console.log(issuesSDK);
                console.log(issuesMobile);
                console.log(issuesCamera);

                var data = [["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]];
                $.plot("#line-chart-issues", [data], {
                    series: {
                        bars: {
                            show: true,
                            barWidth: 0.6,
                            align: "center"
                        }
                    },
                    xaxis: {
                        mode: "categories",
                        tickLength: 0
                    }
                });

            }

            /* end site stats */
        }
    </script>

</head>

最佳答案

categories 插件需要 xaxis 选项中的类别数组:

xaxis: {
    mode: "categories",
    categories: ["Category One", "Category Two", "Category Three"] // I don't see you doing this anywhere in your code!
}

关于javascript - jQuery Flot 库的类别插件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26400921/

文章推荐： javascript - 在关闭 Jasny Off Canvas 时调用函数

文章推荐： java - jackson 无法将 json 转换为 map 列表

文章推荐： swift - Swift 中类型方法返回值的“未解析标识符”

文章推荐： java - 数的前 n 个因数

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery Flot 库的类别插件不起作用