当前位置： 首页 > article >正文

Vue-5-基于JavaScript和plotly.js绘制数据分析类图表

article 2025/6/6 10:58:24

文章目录

  • 1 折线图示例
    • 1.1 网页基本结构
    • 1.2 绘图流程
      • 1.2.1 type图表类型
      • 1.2.2 mode显示方式
      • 1.2.3 marker数据点的样式
    • 1.3 横坐标为时间戳
      • 1.3.1 xaxis.type坐标值类型
      • 1.3.2 xaxis.tickformat格式
    • 1.4 悬停时展示毫秒数
  • 2 一个变量
    • 2.1 箱线图
    • 2.2 小提琴图
    • 2.3 直方图
  • 3 两个变量
    • 3.1 折线图
    • 3.2 散点图
    • 3.3 回归图
  • 4 相关性系数热力图
    • 4.1 两个变量
    • 4.2 两个及以上变量

折线图、散点图、箱线图、小提琴图、直方图、回归图、相关性系数热力图。

1 折线图示例

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8"/

相关文章：

Vue-5-基于JavaScript和plotly.js绘制数据分析类图表

文章目录 1 折线图示例1.1 网页基本结构1.2 绘图流程1.2.1 type图表类型1.2.2 mode显示方式1.2.3 marker数据点的样式1.3 横坐标为时间戳1.3.1 xaxis.type坐标值类型1.3.2 xaxis.tickformat格式1.4 悬停时展示毫秒数2 一个变量2.1 箱线图2.2 小提琴图2.3 直方图3 两个变量3.1 折…...

编程日记 2025/6/5 6:42:53

UI自动化测试的革新，新一代AI工具MidScene.js实测！

前言 AI已经越来越深入地走入我们的实际工作，在软件测试领域，和AI相关的新测试工具、方法也层出不穷。在之前我们介绍过结合 mcp server 实现 AI 驱动测试的案例，本文我们将介绍一个近期崭露头角的国产AI测试工具 Midscene.js Midscene.js简介 MidScene.js 是由字节跳动 w…...

编程日记 2025/6/5 5:42:39

StarRocks的几种表模型

## 一、引言&#xff1a;OLAP场景下的表模型挑战 在实时分析领域&#xff0c;数据表的设计直接影响查询性能、存储效率和更新灵活性。StarRocks作为新一代极速全场景MPP数据库&#xff0c;针对不同的业务场景提供了多样化的表模型解决方案。每种模型通过独特的存储结构和预计算…...

编程日记 2025/6/5 18:50:54

4. Qt对话框（2）

在上节中已经学习了对话框的确认和取消&#xff0c;本节内容继续接上节完成登录对话框实例并得到登录信息。 本文部分ppt、视频截图原链接&#xff1a;[萌马工作室的个人空间-萌马工作室个人主页-哔哩哔哩视频] 1 实现登录对话框 1.1 功能需要 得到登录信息&#xff0c;需要…...

编程日记 2025/6/5 21:46:25

2025-5-31-C++ 学习 字符串（终）

字符串 2025-5-31-C 学习 字符串&#xff08;终&#xff09;P1200 [USACO1.1] 你的飞碟在这儿 Your Ride Is Here题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 输入输出样例 #2输入 #2输出 #2 说明/提示题解代码 P1597 语句解析题目背景题目描述输入格式输出格式输入…...

编程日记 2025/6/5 12:42:46

Android Studio 2022.2.1.20 汉化教程

查看Android Studio 版本 Android Studio Flamingo | 2022.2.1 Patch 2 下载&#xff1a;https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----/versions/stable...

编程日记 2025/6/5 9:37:32

第17讲、odoo18可视化操作代码生成模块

1. 模块概述 代码框架生成模块是一个专为Odoo开发者设计的工具&#xff0c;旨在简化模块开发过程中的重复性工作。该模块允许开发者通过定义模型名称和字段&#xff0c;自动生成相应的Python代码、XML视图和CSV权限配置文件&#xff0c;从而大幅提高开发效率。通过这种方式&am…...

编程日记 2025/6/5 10:07:40

golang -- slice 底层逻辑

目录 一、前言二、结构三、创建3.1 根据 make创建3.2 通过数组创建 四、内置append追加元素4.1 追加元素4.2 是否扩容4.2.1 不扩容4.2.2 扩容 总结 一、前言 前段时间学了go语言基础&#xff0c;过了一遍之后还是差很多&#xff0c;所以又结合几篇不同资料重新学习了一下相关…...

编程日记 2025/6/5 8:41:26

SOC-ESP32S3部分：26-物联网MQTT连云

飞书文档https://x509p6c8to.feishu.cn/wiki/IGCawAgqFibop7kO83KcsDFBnNb ESP-MQTT 是 MQTT 协议客户端的实现&#xff0c;MQTT 是一种基于发布/订阅模式的轻量级消息传输协议。ESP-MQTT 当前支持 MQTT v5.0。 特性 支持基于 TCP 的 MQTT、基于 Mbed TLS 的 SSL、基于 WebSo…...

编程日记 2025/6/5 11:03:07

从前端工程化角度解析 Vite 打包策略：为何选择 Rollup 而非 esbuild。

文章目录 前言一、esbuild 与 Rollup 的技术特性对比1、esbuild&#xff1a;极速开发利器&#xff0c;功能尚待完善2、Rollup&#xff1a;专业打包工具&#xff0c;功能全面强大 二、Vite 打包策略的工程化考量因素1、开发阶段与生产阶段的需求差异2、功能完整性与生态兼容性3、…...

编程日记 2025/6/5 21:30:35

三层架构 vs SOA vs 微服务：该选谁？

三层架构 vs SOA vs 微服务：该选谁？ 一、从单体到分布式：架构演进的必然性 最早的系统架构通常是单体架构（Monolithic Architecture），所有功能都打包在一个应用里，部署方便，但扩展性和灵活性有限。后来，为了让系统更具可维护性，三层架构成为主流。但当业务变得复杂…...

编程日记 2025/6/5 9:25:00

制造业的未来图景：超自动化与劳动力转型的双重革命

市场现状&#xff1a;传统制造业的转型阵痛 当前全球制造业正站在历史性变革的十字路口。埃森哲对552位工厂经理的全球调研显示&#xff0c;60%的受访者将劳动力转型视为首要战略任务​​&#xff0c;而63%的工厂正在加速部署自动化技术[1]。超过​75%的工厂经理​​认为&…...

编程日记 2025/6/5 8:07:00

使用Haproxy搭建Web群集

一、基础环境准备 服务器规划 67 HAProxy调度器&#xff1a;1台 (2核4G&#xff0c;CentOS 7/8) Web服务器&#xff1a;至少2台&#xff08;如Nginx/Apache&#xff0c;建议192.168.1.101-102&#xff09; 客户端测试机&#xff1a;1台&#xff08;Windows/Linux&#xff09;…...

编程日记 2025/6/5 19:23:55

【Unity】相机 Cameras

1 前言 主要介绍官方文档中相机模块的内容。 关于“9动态分辨率”&#xff0c;这部分很多API文档只是提了一下&#xff0c;具体细节还需要自己深入API才行。 2 摄像机介绍 Unity 场景在三维空间中表示游戏对象。由于观察者的屏幕是二维屏幕&#xff0c;Unity 需要捕捉视图并将…...

编程日记 2025/6/5 7:04:01

如何在 Solana 上发币，并创建初始流动性让项目真正“动”起来？

在 Solana 上发行代币如今已不再是技术门槛&#xff0c;而是市场策略和执行效率的较量。如果你只是简单发了一个代币&#xff0c;却没为它建立流动性和市场机制&#xff0c;那么它就只是一个“死币”。 本文将带你一步步理解&#xff0c;如何从发币到建立流动性池&#xff0c;…...

编程日记 2025/6/5 21:45:45

C++.凸包算法

C.凸包算法 1. 凸包算法概述1.1 凸包的定义1.2 凸包算法的应用场景 2. Graham扫描算法2.1 算法原理2.2 C代码实现2.3 示例分析Mermaid图示 3. Andrew算法3.1 算法原理3.2 C代码实现3.3 示例分析Mermaid图示 4. 算法性能比较4.1 时间复杂度分析Graham扫描算法Andrew算法性能对比…...

编程日记 2025/6/5 20:47:36

C++ 游戏开发详细流程

&#x1f9e0; 第一阶段&#xff1a;项目规划与架构设计 关键词&#xff1a;系统性、模块化、可扩展性 1.1 目标明确 游戏类型&#xff1a;2D / 2.5D / 3D / VR平台选择&#xff1a;PC、主机、移动设备多人/单人&#xff1a;是否含网络模块&#xff08;决定是否使用 socket、U…...

编程日记 2025/6/5 11:46:13

核心机制:滑动窗口

TCP 协议 1.确认应答 可靠传输的核心机制 2.超时重传 可靠传输的核心机制 3.连接管理 TCP/网络 最高的面试题 三次握手,建立连接(必须是 三次) 四次挥手,断开连接(可能是 三次) 核心机制四:滑动窗口 算法中的"滑动窗口" 出自 TCP 前面的三个…...

编程日记 2025/6/5 12:58:28

苹果电脑深度清理，让老旧Mac重焕新生

在日常使用苹果电脑的过程中&#xff0c;随着时间推移&#xff0c;系统内会积累大量冗余数据&#xff0c;导致电脑运行速度变慢、磁盘空间紧张。想要让设备恢复流畅&#xff0c;苹果电脑深度清理必不可少。那么&#xff0c;如何进行苹果电脑深度清理呢&#xff1f;接下来为你详…...

编程日记 2025/6/6 0:44:50

Hadoop复习（一）

初识Hadoop 分别从选择题、大题和复习Linux命令来复习 选择题 问题 1 单项选择难度级别 3 2 分 下面哪一个不属于Google的三驾马车&#xff1f; 答案选项组 GFS NDFS BigTable MapReduce 问题 2 单项选择难度级别 3 2 分 Hadoop 3.x版本支持最低的JDK版本是&#x…...

编程日记 2025/6/5 7:51:39

微服务面试（分布式事务、注册中心、远程调用、服务保护）

1.分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构下&#xff0c;产生的事务&#xff0c;例如&#xff1a; 跨数据源的分布式事务跨服务的分布式事务综合情况 我们之前解决分布式事务问题是直接使用Seata框架的AT模式&#xff0c;但是解决分布式事务…...

编程日记 2025/6/5 8:41:37

高性能MYSQL（三）:性能剖析

一、性能剖析概述 &#xff08;一&#xff09;关于性能优化 1.什么是性能&#xff1f; 我们将性能定义为完成某件任务所需要的时间度量&#xff0c;换句话说&#xff0c;性能即响应时间&#xff0c;这是一个非常重要的原则。 我们通过任务和时间而不是资源来测量性能。数据…...

编程日记 2025/6/5 12:47:33

Go 语言中的 panic 详解

Go 语言中的 panic 详解 在 Go 语言中&#xff0c;panic 是一种用于处理​​不可恢复错误​​的机制。当程序遇到无法继续执行的严重错误时&#xff0c;会自动或手动触发 panic&#xff0c;终止当前函数的执行&#xff0c;并开始进行​​堆栈展开​​&#xff08;stack unwind…...

编程日记 2025/6/5 10:31:52

mysql（十四）

目录 多表查询 1.准备工作 2--创建表格 3--插入数据 2.笛卡尔积查询 3.内连接查询 1--隐式内连接 格式 查询 2--显示内连接&#xff08;Inner join .. on &#xff09; 格式 查询 4.外连接查询 1--左外连接查询&#xff08;LEFT OUTER JOIN .. ON &#xff09; 格式 查询 2-- 右…...

编程日记 2025/6/5 7:53:11

工业物联网中的事件驱动采样架构及优化

论文标题 Event-Based Sampling Architecture and Optimization for Industrial Internet of Things 工业物联网中的事件驱动采样架构及优化 作者信息 Tejas Thosani Process Control Systems, Micron Technology Inc., Manassas, USA tthosanimicron.com Andres Prado Esp…...

编程日记 2025/6/5 20:58:44

基于 HT for Web 的轻量化 3D 数字孪生数据中心解决方案

一、技术架构&#xff1a;HT for Web 的核心能力 图扑软件自主研发的 HT for Web 是基于 HTML5 的 2D/3D 可视化引擎&#xff0c;核心技术特性包括&#xff1a; 跨平台渲染&#xff1a;采用 WebGL 技术&#xff0c;支持 PC、移动端浏览器直接访问&#xff0c;兼容主流操作系统…...

编程日记 2025/6/5 6:27:12

JavaScript 性能优化：从入门到实战

在当今快节奏的互联网时代&#xff0c;用户对网页和应用的加载速度与响应性能要求越来越高。JavaScript 作为网页交互的核心语言&#xff0c;其性能表现直接影响用户体验。本文将用简单易懂的语言&#xff0c;带你了解 JavaScript 性能优化的实用技巧&#xff0c;帮助你的代码跑…...

编程日记 2025/6/5 14:46:21

启动metastore时报错MetaException(message:Version information not found in metastore

把hdfs清空重新安装了一下&#xff0c;hive的mysql元数据库删除掉之后重建之后一直启动报错 metastore.RetryingHMSHandler (RetryingHMSHandler.java:<init>(83)) - HMSHandler Fatal error: MetaException(message:Version information not found in metastore.) 后来…...

编程日记 2025/6/5 10:13:21

Spring 中 @Value 注解多实例配置方案详解

引言 在使用 Spring 框架进行开发时&#xff0c;我们经常会使用 Value 注解来注入配置值。然而&#xff0c;当我们需要创建同一个类的多个实例&#xff0c;并且每个实例需要使用不同的配置值时&#xff0c;直接在类中使用 Value 注解就会遇到问题。本文将深入探讨这个问题&…...

编程日记 2025/6/5 21:02:28

MyBatisPlus（1）：快速入门

我们知道&#xff0c;MyBatis是一个优秀的操作数据库的持久层框架&#xff08;优秀持久层框架——MyBatis&#xff09;&#xff0c;其基于底层的JDBC进行高度封装&#xff0c;极大的简化了开发。但是对于单表操作而言&#xff0c;我们需要重复地编写简单的CRUD语句。这其实是不…...

编程日记 2025/6/5 18:12:28