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

相关文章

用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

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

Python结合requests和Cheerio处理网页内容的操作步骤

《Python结合requests和Cheerio处理网页内容的操作步骤》Python因其简洁明了的语法和强大的库支持,成为了编写爬虫程序的首选语言之一,requests库是Python中用于发送HT... 目录一、前言二、环境搭建三、requests库的基本使用四、Cheerio库的基本使用五、结合req

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

如何用Java结合经纬度位置计算目标点的日出日落时间详解

《如何用Java结合经纬度位置计算目标点的日出日落时间详解》这篇文章主详细讲解了如何基于目标点的经纬度计算日出日落时间,提供了在线API和Java库两种计算方法,并通过实际案例展示了其应用,需要的朋友... 目录前言一、应用示例1、天安门升旗时间2、湖南省日出日落信息二、Java日出日落计算1、在线API2