highCharts文档与演示效果的使用 - 文档(应用型)解读
2024-04-20 04:49:58
文章目录
- highCharts文档与演示效果的使用 - 文档(应用型)解读
- 代码参考：`(以折线图为例 )`
- 效果截图：
- 接口返回的数据：(返回的data数据)
- 文档解读：
highCharts文档与演示效果的使用 - 文档(应用型)解读
部分截图图片来源：www.highcharts.com.cn
代码参考：(以折线图为例 )
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="description" content="" /><title>通过 Ajax 加载 CSV 数据</title><script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script><script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/data.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script><script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script></head><body><div id="container" style="min-width:400px;height:400px"></div><div class="message"></div><script>var chart=null;$.getJSON("https://data.jianshukeji.com/jsonp?filename=csv/analytics.csv&callback=?",function(t){chart=Highcharts.chart("container",{data:{csv:t},title:{text:"网站日常访问量"}, // 图表大标题subtitle:{text:"数据来源: 接口Google Analytics"}, // 图表二标题xAxis:{ // X轴方向tickInterval:6048e5,tickWidth:0,gridLineWidth:1,labels:{align:"left",x:3,y:-3},dateTimeLabelFormats:{week:"%Y-%m-%d"}},yAxis:[ // Y轴方向{title:{text:null},labels:{align:"left",x:3,y:16,format:"{value:.,0f}"},showFirstLabel:!1},{linkedTo:0,gridLineWidth:0,opposite:!0,title:{text:null},labels:{align:"right",x:-3,y:16,format:"{value:.,0f}"},showFirstLabel:!1}],legend:{align:"left",verticalAlign:"bottom",y:20,floating:!0,borderWidth:0}, // 区块注释区域tooltip:{ // 提示框shared:!0,crosshairs:!0,dateTimeLabelFormats:{day:"%Y-%m-%d"}},plotOptions:{series:{cursor:"pointer",point:{events:{click:function(t){// dateFormat 日期格式化（格式过滤器）$(".message").html(Highcharts.dateFormat("%Y年 - %m月 - %d日",this.x)+":<br/> 访问量："+this.y)}}},marker:{lineWidth:0} // 点状宽度}}})})</script><!-- Generated By Jianshu Cache service at 2019/06/10 10:58:09 --></body>
</html>效果截图：
接口返回的数据：(返回的data数据)
// 未格式化
?("# ----------------------------------------\n# highcharts.com\n# Audience Overview\n# 20130309-20130408\n# ----------------------------------------\nDay,访问量（PV）,访问用户（UV）\n3/9/13,5691,4346\n3/10/13,5403,4112\n3/11/13,15574,11356\n3/12/13,16211,11876\n3/13/13,16427,11966\n3/14/13,16486,12086\n3/15/13,14737,10916\n3/16/13,5838,4507\n3/17/13,5542,4202\n3/18/13,15560,11523\n3/19/13,18940,14431\n3/20/13,16970,12599\n3/21/13,17580,13094\n3/22/13,17511,13234\n3/23/13,6601,5213\n3/24/13,6158,4806\n3/25/13,17353,12639\n3/26/13,17660,12768\n3/27/13,16921,12389\n3/28/13,15964,11686\n3/29/13,12028,8891\n3/30/13,5835,4513\n3/31/13,4799,3661\n4/1/13,13037,9503\n4/2/13,16976,12666\n4/3/13,17100,12635\n4/4/13,15701,11394\n4/5/13,14378,10530\n4/6/13,5889,4521\n4/7/13,6779,5109\n4/8/13,16068,11599\n")/**********************格式化（去除全部 \n）*******************************************************/?("# ----------------------------------------
# highcharts.com
# Audience Overview
# 20130309-20130408
# ----------------------------------------
Day,访问量（PV）,访问用户（UV）
3/9/13,5691,4346
3/10/13,5403,4112
3/11/13,15574,11356
3/12/13,16211,11876
3/13/13,16427,11966
3/14/13,16486,12086
3/15/13,14737,10916
3/16/13,5838,4507
3/17/13,5542,4202
3/18/13,15560,11523
3/19/13,18940,14431
3/20/13,16970,12599
3/21/13,17580,13094
3/22/13,17511,13234
3/23/13,6601,5213
3/24/13,6158,4806
3/25/13,17353,12639
3/26/13,17660,12768
3/27/13,16921,12389
3/28/13,15964,11686
3/29/13,12028,8891
3/30/13,5835,4513
3/31/13,4799,3661
4/1/13,13037,9503
4/2/13,16976,12666
4/3/13,17100,12635
4/4/13,15701,11394
4/5/13,14378,10530
4/6/13,5889,4521
4/7/13,6779,5109
4/8/13,16068,11599
")
文档解读：
官方文档：链接地址1（点击查看） 、 链接地址2（点击查看）
属性、属性值文档：链接地址3：点击查看
以上就是关于 ” highCharts文档与演示效果的使用 - 文档(应用型)解读 ” 的全部内容。
highCharts文档与演示效果的使用 - 文档(应用型)解读相关推荐
- 魔众文库系统已支持无损的HTML常见文档预览效果
随着数字化信息的快速发展,许多企业.机构和个人需要一个稳定的文库系统来管理和存储各种文档类型,以便更好地分享和传播知识.魔众文库系统就是一个专为这个目的而设计的平台,它基于文档系统知识,建立平台与领域 ...
- java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调试
java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调试 java毕业设计物流信息管理系统录像演示源码+lw文档+mybatis+系统+mysql数据库+调 ...
- 新鲜出炉的React博客系统源码，极简主义设计，手机端可自适应，超级简单，带部署文档与演示视频加截图
新鲜出炉的React博客系统源码,极简主义设计,手机端可自适应,超级简单,带部署文档与演示视频加截图. 使用技术: 客户端前端:Next.js + React 管理端前端:React + Ant De ...
- Python 技术篇 - 使用pypandoc库实现html文档转word文档实例演示
首先需要安装 pandoc 程序,pypandoc 是用来调用该程序来完成工作的. 工具获取: 小蓝枣的csdn资源仓库 转换代码如下: # -*- coding:utf-8 -*- import p ...
- vuepress文档服务器,使用 vuepress 快速搭建文档
vuepress官方教程,em...也是用vuepress搭建的,哈哈. 这句很经典,也是表明了vuepress最好的用处: VuePress 专注在以内容为中心的静态网站上,同时提供了一些为技术文档 ...
- Speedoffice（PPT）如何做动画演示效果
在我们的学习工作和生活中,常常要用到PPT去进行解说,网上的模板多是静态效果ppt,如果能在ppt中做出动态效果,会让演说更加生动形象,那么今天和大家分享一下如何做动画演示效果. 1,首先我们运行of ...
- 【工具】云文档办公利器！腾讯文档好评！
今天在使用飞书的时候发现腾讯文档好像升级了,支持ppt.收集表(待测试)和文件夹功能了,也可能是之前就有我没发现,太给力了,目测是现在最给力的云文档工具.下边我简单总结一下优点和功能. 云办公工具分类 ...
- Learning to rank的讲解，单文档方法（Pointwise），文档对方法（Pairwise），文档列表方法（Listwise）
学习排序(Learning to Rank) LTR(Learning torank)学习排序是一种监督学习(SupervisedLearning)的排序方法.LTR已经被广泛应用到文本挖掘的很多领域 ...
- wps的ppt怎么存html,如何将网页快速转换为WPS与WORD文档 ppt怎么转换成word文档
导读:小编根据大家的需要整理了一份关于<如何将网页快速转换为WPS与WORD文档 ppt怎么转换成word文档>的内容,具体内容: 看到图文并茂的网页,想把它全部或部分转换为WPS或者WO ...
最新文章
- buffers和cache的区别
- 空指针、悬空指针、野指针
- 线程池参数详解_java中常见的六种线程池详解
- Android日志[进阶篇]五-阅读错误报告
- SQLAlchemy 中文文档翻译计划
- 2、python的print函数格式化输出
- halcon 深度学习标注_Halcon18--深度学习应用问题记录
- 字节码编程 | 使用Javassist生成JavaBean
- 判断一个正整数是素数还是合数
- 23种设计模式之工厂模式
- 集成calibre到cadence virtuoso环境中 load: can‘t access file - “/opt/eda/Mentor/lib/calibre.skl“
- grafan 6.3.x pannel研究
- 基于语音的情绪识别系统（Python）
- 上海某大型企业因盗版Catia被罚千万
- （附源码）springboot校园二手销售网站 毕业设计 161417
- C++ 强制类型转换操作符（static_cast、dynamic_cast、const_cast和reinterpret_cast）
- 瑞幸入局无人零售：“不安分”的挑战者
- 射频混频器matlab,一个很多射频/天线工程师不知道的神奇网站
- Substance Painter 的一些玩法笔记
- kubernetes之部署dashboard 和heapster