Highcharts入门之简介
2019/6/27 22:13:44
本文主要是介绍Highcharts入门之简介,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在网页中创建一个这样的图表,你觉得会要多久?
确实需要很久很久,如果你对JavaScript不是特别熟练的话。
但是有个好消息就是如果,你使用Highcharts框架的话,可能十多行代码就能让你在页面中生成这样有特效的图表。
当然他的功能远不止这些,各种图表,打印,导出,对比分析。
他不仅仅可以用来做网站的图表分析,就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧,完全就可以抛弃PPT了啊。
所以赶紧来了解如何使用他吧!!!
下面给一个简单的Dome:
1.在highcharts中属性以逗号隔开
2.一个大的属性中使用{},在{}中填写具体的属性
3.除了数据其他的属性一般使用”"包含
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div class="chart" style="width: 800px ;height: 400px"> </div> <script> $(function () { $(".chart").highcharts({ //指定在class为chart的地方创建图表 chart:{ type:'line' //图表的类型,还有column等 }, title:{ text:'Dome01' //图表的标题 }, xAxis:{ categories:['A','B','C','D'] //x坐标的分组 }, yAxis:{ title:{ text:'some' //y坐标的标题 } }, series:[{ name:'zhangsan', //数据的名称 data:[2,3,5,3] //具体的数据 },{ name:'lisi', data:[3,5,1,3] },{ name:'wangwu', data:[1,4,6,2] }] }) ; }); </script> </body> </html>
如果现在看不懂也没关系,可以放在浏览器里试一试,后续我还会更新Highcharts的相关文章,感兴趣的朋友们可以继续支持找一找教程网。
这篇关于Highcharts入门之简介的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist