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