plot()函数画柱状图

最新推荐文章于 2025-04-22 15:54:34 发布

工藤新一OL

最新推荐文章于 2025-04-22 15:54:34 发布

阅读量2.5k

点赞数 5

文章标签：菜鸟记录自我心得

本文链接：https://blog.youkuaiyun.com/qq_41760419/article/details/89084598

版权

本文介绍了在ASP.NET页面中使用plot()函数绘制柱状图的方法，包括加载Flot库，设置图表数据和样式，以及实现鼠标悬停时显示数据提示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

aspx页面画图：

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>质量优化结果</title>
    <uc1:HeaderCSS runat="server" ID="HeaderCSS" />
    <script src="../../BaseStyle/flot/jquery.flot.js"></script>
    <script src="../../BaseStyle/flot/jquery.flot.pie.min.js"></script>
    <script src="../../BaseStyle/flot/jquery.flot.categories.min.js"></script>
    <script src="../../BaseStyle/flot/jquery.flot.errorbars.min.js"></script>
    <script src="../../BaseStyle/flot/jquery.flot.navigate.min.js"></script>
    <script src="../../BaseStyle/flot/jquery.flot.axislabels.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).resize(function () {
                load();
            });
            // 节点提示
            $("<div id='tooltip'></div>").css({
                position: "absolute",
                display: "none",
                border: "1px solid #000",
                padding: "3px 8px",
                "background-color": "#000",
                opacity: 0.80,
                color: "#FFF",
                "border-radius": "4px",
                "font-size": "12px",
                "z-index": 10
            }).appendTo("body");
            load();
        });

        function load() {
            var data = [
            [1, 19.40114439],
            [2, 16.2309483],
            [3, 17.10048007],
            [4, 13.88704077],
            [5, 17.61835513],
            [6, 10.57190026],
            [7, 10.07231199],
            [8, 11.26995944],
            [9, 16.53970145],
            [10, 7.29524116],
            [11, 12.85346515],
            [12, 13.71547216],
            [13, 13.65882465],
            [14, 2.309942469],
            [15, 6.212419655],
            [16, 4.859425891],
            [17, 13.22129237],
            [18, 14.59538964],
            [19, 14.51518123],
            [20, 5.879785634],
            [21, 10.74746399],
            [22, 5.676491025],
            [23, 10.789181],
            [24, 10.74093716],
            [25, 5.035829026],
            [26, 10.89384903],
            [27, 16.01847951],
            [28, 13.97231225],
            [29, 14.84213668],
            [30, 17.6178537],
            [31, 11.80036446],
            [32, 15.08712054],
            [33, 10.59591561],
            [34, 13.91536921],
            [35, 14.30915965],
            [36, 16.61547674],
            [37, 14.6278781],
            [38, 13.49658165],
            [39, 10.97111317],
            [40, 14.47645779],
            [41, 12.08004585],
            [42, 8.315603881],
            [43, 10.79716765],
            [44, 12.08128194],
            [45, 13.87588933],
            [46, 15.52392701],
            [47, 16.01912551],
            [49, 13.69734841],
            [50, 18.00595781],
            [51, 12.79636344],
            [52, 11.09713246],
            [53, 13.00486547],
            [54, 12.88605148],
            [55, 11.15209825],
            [56, 11.15209825],
            [57, 17.65333508],
            [58, 12.63085012],
            [59, 20.44438739],
            [60, 14.40072197]];
            $.plot("#divZhiLiang", [data], {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.5,
                        align: "center",
                        fillColor: "#63B8FF"
                    }
                },
                grid: {
                    hoverable: true,
                    color: "#999999",
                    borderWidth: 1
                },
                colors: ["#63B8FF"],
                title: "1111",
                xaxis: {
                    mode: "categories",
                    tickLength: 0,
                    axisLabel: '组别'
                },
                yaxes: [
                    { position: 'left', axisLabel: '质量（kg）', labelWidth: 30, showTickLabels: 'none' }
                ]

});

            $("#divZhiLiang").bind("plothover", function (event, pos, item) {
                if (item) {
                    var x = item.datapoint[0], y = item.datapoint[1];
                    $("#tooltip").html(y + " kg")
                            .css({ top: item.pageY - 28, left: item.pageX - 50 })
                            .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            });
        }
    </script>
    <style type="text/css">
        .axisLabels {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="layout-center" style="left: 5px;">
            <div class="layout-header">
                <span class="icon-list">质量优化结果 - XX优化算例</span>
            </div>
            <div class="layout-content" style="padding: 2px; overflow: hidden;">
                <div class="easyui-layout" fit="true">
                    <div region="center">
                        <div id="panel" class="stan-panel" style="position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;">
                            <div id="divZhiLiang" style="height: 100%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

效果图：