Plotly.js 热力图与折线结合

2024-01-09 06:36
文章标签 js 结合 折线 力图 plotly

本文主要是介绍Plotly.js 热力图与折线结合,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述
上次记录了Echarts热力图与折线图的结合,但其效果不是很自然。后又找到了Plotly.js库,发现其效果不错。在此整理下实现过程。这里面涉及到自定义工具栏、自定义工具图标等等

配置工具栏显示的工具图标

let config = {locale: 'zh-cn',      // 设置本地语言displayModeBar: true, // 显示工具栏displaylogo: false,   // 隐藏logo// 移除部分图标modeBarButtonsToRemove:  ['toImage', 'pan', 'zoom', 'zoomin', 'zoomout', 'lasso2d','autoscale','reset']
}

配置自定义工具栏按钮

// 在let config下添加按钮部分:
let config = {...modeBarButtonsToAdd: [{name: '折线',icon: {width: 500,height:500,path: 'M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z',},// 绑定的点击事件,注意gb是整个div对象。可通过.xxx的方式获取div中的信息。比如:gb.id可得div的Idclick: function(gd) {load_line_data('line', gd.id)  // 自定义图标按钮被点击后的事件,我这实现了点击后热力图切换成Echarts折线图的功能。}},],
}

设置layout:

let layout = {modebardisplay: false,title: { text: "热力图结合折线图", side: 'top center',  // 标题的位置及字体信息font: {color: "#73cff2",size: 14,},},margin: { t: 30, l: 24, b: 24, r: 0 },  // 调整图表位置paper_bgcolor: "#09357a",  // 设置图表背景色plot_bgcolor: "#09357a",    // 设置轴线背景色xaxis: {tickcolor: "#03c7ff",tickfont:{color: "#03c7ff"}},//刻度线的颜色yaxis: {visible: false,tickcolor: "#03c7ff",tickfont:{color: "#03c7ff"},zeroline:true, hoverformat: '.2r'},
};

配置热力图的数据

let heatmap = {type: "heatmap",name: "name会显示在图表的悬浮窗内",  // 可通过接口获得或者固定hoverinfo: "x+z",  // 悬浮窗需要显示的数据x表示数据的x轴对应的值,其他数据需要显示的话同理,配置上即可,支持:x、y、z、x+y、x+z...xhoverformat: "%Y-%m-%d %H:%M:%S",  // 如果x轴是时间的话,此配置可以格式化日期hovertemplate: '<b>日期:</b>: %{x}<br><b>权重:</b>: %{z:.4f}<br>',  // 悬浮窗的样式等等再这里配置hoverlabel: {bgcolor: "rgba(0,0,0,0)",  // 定义悬浮窗的背景颜色bordercolor: "#03c7ff",    // 定义悬浮窗的边框颜色font: {color: "#149b6a", // 定义悬浮窗内容字体颜色size: 14,     // 定义悬浮窗内容字体大小}},showscale: false,  // 是否显示右侧的颜色比例尺// 热力图的三维数据x: item.x,  y: item.y,z: item.z,
}

配置折线图的数据

let line = {mode: 'lines',name: item.text,xhoverformat: "%Y-%m-%d %H:%M:%S",  // 格式化悬浮窗的x轴时间字段hovertemplate: '<b>日期:</b>: %{x}<br><b>数据:</b>: %{customdata}<br>',  // 定义悬浮窗的内容hoverlabel: {bgcolor: "rgba(0,0,0,0)",  // 定义悬浮窗的背景颜色bordercolor: "#03c7ff",    // 定义悬浮窗的边框颜色font: {color: "#149b6a", // 定义悬浮窗内容字体颜色size: 14,     // 定义悬浮窗内容字体大小}},line: { color: "#149b6a", },  // 定义线的颜色x: item.x1,y: item.y1,customdata: item.customdata,   // 设置自定义数据(数组),此数据可在hovertemplate中访问。
}

完整代码如下:

// Dom元素的配置很简单:
<div id="chart_heatmap" style="width: 100%;height: 400px;"></div>
//  Javascript部分
const load_heatmap_data = function () {let chart_heatmap = document.getElementById("chart_heatmap");$.ajax({type: "POST",url: "后端接口地址",success: function (item) {# 设置配置信息let config = {locale: 'zh-cn',displayModeBar: true,displaylogo: false,  //隐藏logodisplayReset: false, //modeBarButtonsToRemove:  ['toImage', 'pan', 'zoom', 'zoomin', 'zoomout', 'lasso2d','autoscale','reset'],modeBarButtonsToAdd: [{name: '折线',icon: {width: 500,height:500,// 折线图标的svgpath: 'M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z',},click: function(gd) {load_line_data('line', gd.id)}},],}let layout = {modebardisplay: false,title: { text: item.text, side: 'top center',font: {color: "#73cff2",size: 14,},},margin: { t: 30, l: 24, b: 24, r: 0 },paper_bgcolor: "#09357a",  // 设置图表背景色plot_bgcolor: "#09357a",    // 设置轴线背景色xaxis: {tickcolor: "#03c7ff",tickfont:{color: "#03c7ff"}},//刻度线的颜色yaxis: {visible: false,tickcolor: "#03c7ff",tickfont:{color: "#03c7ff"},zeroline:true, hoverformat: '.2r'},};let heatmap = {type: "heatmap",name: item.text,hoverinfo: "x+z",xhoverformat: "%Y-%m-%d %H:%M:%S",hovertemplate: '<b>日期:</b>: %{x}<br><b>权重:</b>: %{z:.4f}<br>',hoverlabel: {bgcolor: "rgba(0,0,0,0)",  // 定义悬浮窗的背景颜色bordercolor: "#03c7ff",    // 定义悬浮窗的边框颜色font: {color: "#149b6a", // 定义悬浮窗内容字体颜色size: 14,     // 定义悬浮窗内容字体大小}},showscale: false,x: item.x,y: item.y,z: item.z,}let line = {mode: 'lines',name: item.text,xhoverformat: "%Y-%m-%d %H:%M:%S",  // 格式化悬浮窗的x轴时间字段hovertemplate: '<b>日期:</b>: %{x}<br><b>数据:</b>: %{customdata}<br>',  // 定义悬浮窗的内容hoverlabel: {bgcolor: "rgba(0,0,0,0)",  // 定义悬浮窗的背景颜色bordercolor: "#03c7ff",    // 定义悬浮窗的边框颜色font: {color: "#149b6a", // 定义悬浮窗内容字体颜色size: 14,     // 定义悬浮窗内容字体大小}},line: { color: "#149b6a", },  // 定义线的颜色x: item.x1,y: item.y1,customdata: item.customdata,   // 设置自定义数据(数组),此数据可在hovertemplate中访问。}Plotly.newPlot(chart_heatmap, [heatmap, line], layout, config);},complete: function () {console.log("complete")},});};

这篇关于Plotly.js 热力图与折线结合的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/586214

相关文章

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2