我正在使用jQuery Flot库制作图表,其中的X轴包含文本单位(月)而不是数字。因此,我使用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/

10-12 05:28