highCharts文档与演示效果的使用 - 文档(应用型)解读

最新推荐文章于 2022-01-28 11:43:55 发布

草巾冒小子

最新推荐文章于 2022-01-28 11:43:55 发布

阅读量613

点赞数 1

分类专栏：图表类

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/101109682

版权

图表类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

highCharts文档与演示效果的使用 - 文档(应用型)解读

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文档与演示效果的使用 - 文档(应用型)解读 ” 的全部内容。

草巾冒小子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highCharts文档与演示效果的使用 - 文档(应用型)解读

highCharts文档与演示效果的使用 - 结合版官方文档：链接地址1（点击查看）、链接地址2（点击查看）属性、属性值文档：链接地址3：点击查看以上就是关于 ” highCharts文档与演示效果的使用 - 文档解读 ” 的全部内容。...
复制链接

扫一扫