HTML 曲线图表特效

下面是代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style>
body {background: #000524;
}#wrapper {padding-top: 20px;background: #000524;border: 1px solid #000;box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);max-width: 650px;margin: 35px auto;
}#chart-bar {position: relative;margin-top: -38px;
}
</style></head>
<body><script src="js/apexcharts.js"></script><div id="wrapper"><div id="chart-area"></div><div id="chart-bar"></div>
</div><script>
var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {min: 30,max: 90
});
var options1 = {chart: {id: "chart2",type: "area",height: 230,foreColor: "#ccc",toolbar: {autoSelected: "pan",show: false}},colors: ["#00BAEC"],stroke: {width: 3},grid: {borderColor: "#555",yaxis: {lines: {show: false}}},dataLabels: {enabled: false},fill: {gradient: {enabled: true,opacityFrom: 0.55,opacityTo: 0}},markers: {size: 5,colors: ["#000524"],strokeColor: "#00BAEC",strokeWidth: 3},series: [{data: data}],tooltip: {theme: "dark"},xaxis: {type: "datetime"},yaxis: {min: 0,tickAmount: 4}
};var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);chart1.render();var options2 = {chart: {id: "chart1",height: 130,type: "bar",foreColor: "#ccc",brush: {target: "chart2",enabled: true},selection: {fill: {color: "#fff",opacity: 0.4},xaxis: {min: new Date("27 Jul 2017 10:00:00").getTime(),max: new Date("14 Aug 2017 10:00:00").getTime()}}},colors: ["#FF0080"],series: [{data: data}],stroke: {width: 2},grid: {borderColor: "#444"},markers: {size: 0},xaxis: {type: "datetime",tooltip: {enabled: false}},yaxis: {tickAmount: 2}
};var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);chart2.render();function generateDayWiseTimeSeries(baseval, count, yrange) {var i = 0;var series = [];while (i < count) {var x = baseval;var y =Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;series.push([x, y]);baseval += 86400000;i++;}return series;
}
</script><div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div></body>
</html>

apexcharts.js

由于代码太长了用链接方式下载吧

链接: https://pan.baidu.com/s/1T_LIV2_ey2yEbe0cwOFtmA?pwd=wvbf 提取码: wvbf 

下面是运行效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/246171.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

仅使用 Python 创建的 Web 应用程序(前端版本)第07章_商品列表

在本章中,我们将实现一个产品列表页面。 完成后的图像如下 创建过程与User相同,流程如下。 No分类内容1Model创建继承BaseDataModel的数据类Item2MockDB创建产品表并生成/添加虚拟数据3Service创建一个 ItemAPIClient4Page定义PageId并创建继承自BasePage的页面类5Applicati…

Android Studio离线开发环境搭建

Android Studio离线开发环境搭建 1.下载离线和解压包2.创建工程3.创建虚拟机tips 1.下载离线和解压包 下载地址 百度网盘&#xff1a;https://pan.baidu.com/s/1XBPESFOB79EMBqOhFTX7eQ?pwdx2ek 天翼网盘&#xff1a;https://cloud.189.cn/web/share?code6BJZf2uUFJ3a&#…

单片机开发板-硬件设计

开发板设计 1> 概述2> 功能2.1> GPIO类2.2> 通信类2.3> 显示类 3> 测试 1> 概述 开发板的定位&#xff1a;学会单片机&#xff1b; 目的越单纯&#xff0c;做的东西越好玩&#xff1b; 51开发板&#xff1a;DAYi STM32F103开发板&#xff1a;DAEr STM32F…

LVS 概念介绍

1、集群简介 集群概述 集群称呼来自于英文单词 cluster&#xff0c;表示一群、一串的意思&#xff0c;用在服务器领域则表示大量服务器的集合体&#xff0c;协同起来向用户提供系统资源&#xff0c;系统服务。通过网络连接组合成一个计算机组&#xff0c;来共同完一个任务。 …

GitHub 开启 2FA 双重身份验证的方法

为什么要开启 2FA 自2023年3月13日起,我们登录 GitHub 都会看到一个要求 Enable 2FA 的重要提示,具体如下: GitHub users are now required to enable two-factor authentication as an additional security measure. Your activity on GitHub includes you in this requi…

【C++】模板进阶

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.非类型模板参数 …

华为ensp--NAT实验

实验拓扑图及实验要求 实验相关配置 为保证可以登录防火墙web界面&#xff0c;需要对FW1、FW2以及Cloud1进行相关配置 Cloud1配置 需绑定网卡&#xff08;建议新建虚拟网卡&#xff09;&#xff0c;并且与防火墙管理口&#xff08;默认g0/0/0&#xff09;属于同一网段 FW1 F…

自动驾驶的决策层逻辑

作者 / 阿宝 编辑 / 阿宝 出品 / 阿宝1990 自动驾驶意味着决策责任方的转移 我国2020至2025年将会是向高级自动驾驶跨越的关键5年。自动驾驶等级提高意味着对驾驶员参与度的需求降低&#xff0c;以L3级别为界&#xff0c;低级别自动驾驶环境监测主体和决策责任方仍保留于驾驶…

【思路合集】talking head generation+stable diffusion

1 以DiffusionVideoEditing为baseline&#xff1a; 改进方向 针对于自回归训练方式可能导致的漂移问题&#xff1a; 训练时&#xff0c;在前一帧上引入小量的面部扭曲&#xff0c;模拟在生成过程中自然发生的扭曲。促使模型查看身份帧以进行修正。在像VoxCeleb或LRS这样的具…

ubuntu1604安装及问题解决

虚拟机安装vmbox7 虚拟机操作&#xff1a; 安装增强功能 sudo mkdir /mnt/share sudo mount -t vboxsf sharefolder /mnt/share第一次使用sudo提示is not in the sudoers file. This incident will be reported 你的root需要设置好密码 sudo passwd root 输入如下指令&#x…

机器学习整理

绪论 什么是机器学习&#xff1f; 机器学习研究能够从经验中自动提升自身性能的计算机算法。 机器学习经历了哪几个阶段&#xff1f; 推理期&#xff1a;赋予机器逻辑推理能力 知识期&#xff1a;使机器拥有知识 学习期&#xff1a;让机器自己学习 什么是有监督学习和无监…

【Java面试】Mysql

目录 sql的执行顺序索引的优点和缺点怎么避免索引失效(也属于sql优化的一种)一条sql查询非常慢&#xff0c;我们怎么去排查和优化&#xff1f;存储引擎 MylSAM和InnoDB、Memory的区别事务的四大特性(ACID)脏读、不可重复读、幻读事务的隔离级别&#xff1f;怎么优化数据库SQL优…

多个SSH-Key下,配置Github SSH-Key

首先&#xff0c;检查 github 的连接性&#xff0c;因为DNS污染的原因&#xff0c;很多机器ping不通github&#xff0c;就像博主的机器&#xff1a; 怎么解决DNS污染的问题&#xff0c;博主查了很多教程&#xff0c;测试出一个有效的方法&#xff0c;那就是修改hosts文件。host…

DAY11_(简易版)VUEElement综合案例

目录 1 VUE1.1 概述1.1.1 Vue js文件下载 1.2 快速入门1.3 Vue 指令1.3.1 v-bind & v-model 指令1.3.2 v-on 指令1.3.3 条件判断指令1.3.4 v-for 指令 1.4 生命周期1.5 案例1.5.1 需求1.5.2 查询所有功能1.5.3 添加功能 2 Element2.0 element-ui js和css和字体图标下载2.1 …

go语言(十九)---- channel

channel的使用 //1. 发送value到channelchannel <- value //2. 接收并将其丢弃<- channel //3. 从channel中接收数据&#xff0c;并将其赋值给x x : <- channel 例子 package mainimport "fmt"func main() {//定义一个channelc : make(chan int)go func…

山海鲸智慧医疗解决方案:让医疗数据说话

在医疗领域&#xff0c;数据可视化对于提高诊疗效率、辅助医学研究和提升患者就医体验具有重要意义。作为山海鲸可视化软件的开发者&#xff0c;我们致力于利用先进的数据可视化技术&#xff0c;为医疗行业提供高效、智能的解决方案&#xff0c;本篇文章就带大家一起了解一下这…

【Python】01快速上手爬虫案例一:搞定豆瓣读书

文章目录 前言一、VSCodePython环境搭建二、爬虫案例一1、爬取第一页数据2、爬取所有页数据3、格式化html数据4、导出excel文件 前言 实战是最好的老师&#xff0c;直接案例操作&#xff0c;快速上手。 案例一&#xff0c;爬取数据&#xff0c;最终效果图&#xff1a; 一、VS…

用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境 JavaScript 的历史 JavaScript 最初被称为 LiveScript&#xff0c;由 Netscape&#xff08;Netscape Communications Corporation&#xff0c;网景通信公司&#xff09;公司的布兰登艾奇&#xff08;Brendan Eich&#xff09;在 …

SpringBoot 自定义Filter 提前返回 CORS 错误 处理前后端分离跨域配置无效问题解析

前言 浏览器有跨域限制&#xff0c;非同源策略 (协议、主机名或端口不同) 被视为跨域请求&#xff0c;解决跨域有跨域资源共享(CORS)、反向代理和 JSONP的方式。本篇通过 SpringBoot 的资源共享配置 (CORS) 来解决前后端分离项目的跨域&#xff0c;以及从原理上去解决跨域配置…

JVM简介

一、什么是JVM JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组…