前端控件宝典：UI组件的完整指南(36)——箱线图+散点图【源码在文末并附解释】

原创 于 2023-09-17 21:39:14 发布 · 225 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #ui #状态模式

在当今数字时代，Web应用程序已经成为我们生活的重要组成部分。无论是社交媒体平台、电子商务网站还是在线工具，现代Web应用程序的核心是其用户界面（UI）。而用户界面的关键组成部分之一就是前端控件。

前端控件是Web开发中不可或缺的元素，它们为我们提供了构建各种交互性和功能丰富的Web应用程序的工具。无论您是一名新手前端开发者还是经验丰富的工程师，了解和掌握前端控件都是提高Web开发技能的关键。

本博客系列将带您深入探索前端控件的世界。我们将详细研究各种UI组件，从简单的按钮和表单控件到复杂的图表和地图集成，无所不包。无论您是想要提高自己的技能，还是寻找构建令人印象深刻的用户体验的方法，这个系列都将为您提供宝贵的知识。

在接下来的几篇文章中，我们将探讨不同类型的前端控件，讨论它们的用途、最佳实践和实际示例。无论您的兴趣是构建漂亮的UI、提高用户体验或学习最新的Web开发技术，这个系列都将有所帮助。

准备好探索前端控件的魅力吗？让我们开始吧！

一，演示地址

访问网址：http://59.110.22.223:8080/Model_qianduan/boxplot_light_velocity.html

image-20230915092232340

二、控件常识

自定义控件
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持Microsoft Visual Studio 的所有设计是特性，诸如属性窗口、可视化设计器、属性生成器和工具箱。

上面讲了用户控件，它只需要想创建页面一样，在设计器里拖拉系统控件设计界面，然后为这些控件添加必须的事件代码就可以，它纯粹就是组合。而自定义控件是“从头实现”控件的底层功能，编写一个类继承自Control，并实现INamingContainer接口，甚至重写控件的Render方法，控制控件生成的html代码，以及实现响应从浏览器传回数据的事件和处理传回的数据，它不仅叫自定义控件，也可以叫做复合控件。

自定义控件使用的时候，可以点击vs软件右边上的工具箱，在工具箱上空白处点击右键选择项–在.NET Framework组件选项卡下点击“浏览”–找到你要添加的自定义控件(.dll文件)–打开–确定。这样你就可以在工具箱中将那个自定义控件拖出来使用了。常用的控件有：分页控件、文本编辑器、水晶报表、ActiveReports等。

开发方法：
1、自定义控件的开发，即继承如Control的积累实现服务器控件。

​ 2、开发用户控件。

创建用户控件与创建普通asp.net web页面类似，但是还是有些不同。步骤是：

① 创建一个.ascx的文本文件。这是用户控件和asp.net web页面的第一个不同点，后者使用的扩展名为.aspx。

②在文本文件顶部添加@Control指令，并通过language属性来设置所选择的编程语言，这是用户控件和web页面的第二个不同点。（后者使用@page指令）。

③向文本文件添加HTML标记文本和asp.net服务器控件。可以添加html、body和form之外的任何html标记，这是因为用户控件不能单独使用，必须做为web页面的一部分使用。这是用户控件和web页面的第三个不同点。

三，源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>

</head>
<body >
    <div id="7bb8203796d04378b1947eb815a8980e" class="chart-container" style="width:900px; height:500px; "></div>
    <script>
        var chart_7bb8203796d04378b1947eb815a8980e = echarts.init(
            document.getElementById('7bb8203796d04378b1947eb815a8980e'), 'white', {renderer: 'canvas'});
        var option_7bb8203796d04378b1947eb815a8980e = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "boxplot",
            "xAxisIndex": 0,
            "yAxisIndex": 0,
            "boxWidth": [
                7,
                50
            ],
            "selected_mode": false,
            "data": [
                [
                    650,
                    850.0,
                    940.0,
                    980.0,
                    1070
                ],
                [
                    760,
                    800.0,
                    845.0,
                    895.0,
                    960
                ],
                [
                    620,
                    840.0,
                    855.0,
                    880.0,
                    970
                ],
                [
                    720,
                    762.5,
                    815.0,
                    875.0,
                    920
                ],
                [
                    740,
                    802.5,
                    810.0,
                    870.0,
                    950
                ]
            ],
            "label": {
                "show": true,
                "margin": 8
            },
            "markPoint": {
                "label": {
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                }
            },
            "markLine": {
                "silent": false,
                "precision": 2,
                "label": {
                    "show": true,
                    "margin": 8
                }
            },
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "formatter": "{b}: {c}",
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5,
                "order": "seriesAsc"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        },
        {
            "type": "scatter",
            "xAxisIndex": 1,
            "yAxisIndex": 1,
            "symbolSize": 10,
            "data": [
                [
                    "expr 0",
                    650
                ],
                [
                    "expr 1",
                    620
                ],
                [
                    "expr 2",
                    720
                ],
                [
                    "expr 3",
                    720
                ],
                [
                    "expr 4",
                    950
                ]
            ],
            "label": {
                "show": true,
                "position": "right",
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        },
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "shadow"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "xAxis": [
        {
            "type": "category",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLabel": {
                "show": true,
                "margin": 8,
                "formatter": "expr {value}"
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "boundaryGap": true,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "opacity": 0
                }
            },
            "data": [
                "expr 0",
                "expr 1",
                "expr 2",
                "expr 3",
                "expr 4"
            ]
        },
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 1,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "expr 0",
                "expr 1",
                "expr 2",
                "expr 3",
                "expr 4"
            ]
        }
    ],
    "yAxis": [
        {
            "type": "value",
            "name": "km/s minus 299,000",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "opacity": 1
                }
            }
        },
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 1,
            "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "axisLabel": {
                "show": false,
                "margin": 8
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "show": true,
            "text": "Michelson-Morley Experiment",
            "target": "blank",
            "subtarget": "blank",
            "left": "center",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        },
        {
            "show": true,
            "text": "upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR",
            "target": "blank",
            "subtarget": "blank",
            "left": "10%",
            "top": "90%",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false,
            "textStyle": {
                "fontSize": 14,
                "borderColor": "#999",
                "borderWidth": 1
            }
        }
    ],
    "grid": [
        {
            "show": false,
            "zlevel": 0,
            "z": 2,
            "left": "10%",
            "right": "10%",
            "bottom": "15%",
            "containLabel": false,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "shadowOffsetX": 0,
            "shadowOffsetY": 0
        },
        {
            "show": false,
            "zlevel": 0,
            "z": 2,
            "left": "10%",
            "right": "10%",
            "bottom": "15%",
            "containLabel": false,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "shadowOffsetX": 0,
            "shadowOffsetY": 0
        }
    ]
};
        chart_7bb8203796d04378b1947eb815a8980e.setOption(option_7bb8203796d04378b1947eb815a8980e);
    </script>
</body>
</html>

四，源码解释

您提供了一个包含使用ECharts库创建箱线图（Box Plot）的HTML文档和JavaScript代码。箱线图用于可视化数据的分布情况，包括数据的中位数、四分位数和异常值。

以下是您的HTML文档和JavaScript代码的重要部分：

  1. <script>标签：您包含了一个<script>标签，用于导入ECharts库。
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
  1. 图表容器：您有一个带有ID 7bb8203796d04378b1947eb815a8980e 的 <div> 元素。这是您的箱线图将呈现的位置。
<div id="7bb8203796d04378b1947eb815a8980e" class="chart-container" style="width: 900px; height: 500px;"></div>

  1. JavaScript代码：<script> 部分包含JavaScript代码，该代码使用ECharts初始化和配置箱线图。该图表使用指定的选项创建，包括数据、颜色和样式。

  2. 数据：变量 option_7bb8203796d04378b1947eb815a8980e 包含箱线图的数据。它指定了一个箱线图数据系列，其中包括中位数、四分位数和异常值。此外，还包括了一个散点图数据系列。

  3. 图例：图例指定了数据系列的名称。

  4. 工具提示：工具提示在鼠标悬停时显示信息，并包括箱线图的各种统计值。

  5. 坐标轴：xAxis 和 yAxis 配置了箱线图的坐标轴。

  6. 标题：您为图表定义了一个标题，以及一个附加的说明文本。

通过加载此HTML页面，您可以在指定的容器中看到一个箱线图，显示了数据的分布情况，以及附加的散点图数据。箱线图可用于比较不同数据集的统计特征，而散点图则可用于展示离群点。您可以根据需要修改或自定义此图表的选项和样式。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值