程序博客网 > 利希滕贝格图样淘宝

HighCharts入门教程

来源：互联网发布：利希滕贝格图样淘宝编辑：程序博客网时间：2024/06/05 03:59

一、HighCharts简介

Highcharts 是一个用纯JS编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

二、入门案例

第一步:将Highcharts相关资源文件复制到项目中

第二步：在页面中引入相关js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script src="${pageContext.request.contextPath }/js/highcharts/highcharts.js"></script><script src="${pageContext.request.contextPath }/js/highcharts/modules/exporting.js"></script>

第三步：在页面中提供一个div，并指定id属性

<body><div id="test"></div></body>

第四步：调用Highcharts提供的方法，动态创建图表

$(function(){//页面加载完成后，动态创建图表$("#test").highcharts({title: {            text: '各浏览器份额'        },        series: [{            type: 'pie',            name: '浏览器占比',            data: [                ['Firefox',   45.0],                ['IE',       26.8],                ['Safari',    8.5],                ['Opera',     6.2],                ['Others',   0.7]            ]        }]});});

效果展示

铸剑团队签名：

【总监】十二春秋之，3483099@qq.com；

【Master】戈稻不苍，han169@126.com；

【Java开发】雨鸶，343691194@qq.com；思齐骏惠，qiangzhang1227@163.com；小王子，545106057@qq.com；巡山小钻风，840260821@qq.com；

【VS开发】豆点，2268800211@qq.com；

【系统测试】土镜问道，847071279@qq.com；尘子与自由，695187655@qq.com；

【大数据】沙漠绿洲，caozhipan@126.com；张三省，570417591@qq.com；

【网络】夜孤星，11297761@qq.com；

【系统运营】三石头，261453882@qq.com；平凡怪咖，591169003@qq.com；

【容灾备份】秋天的雨，18568921@qq.com；

【安全】保密，你懂的。

原创作者：小王子

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

阅读全文

0 0

利希滕贝格图样淘宝

利希滕贝格图样淘宝

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子气血不足看什么科调理气血不足气血不足有那些症状气血不足就是贫血吗严重气血不足女人吃什么补气血怎么知道自己气血不足女人喝什么补气血气血两虚气血亏虚症状产后气血虚怎么调理气血两虚如何调理女人气血虚怎么调理气血两虚吃什么中成药气血虚怎么补气血两虚调理气血两虚中成药气血虚吃什么药气血虚药气血虚吃什么中成药女人气血虚会引起哪些症状女人气血虚症状气血两虚型荨麻疹失眠气血两虚气血亏虚表现气血虚的原因女人补气血两虚的方子气血两虚怎么调男性气血虚的症状有哪些女生气血虚女性气血虚怎么回事男人气血虚的症状气血虚怎么办气血两虚吃什么药气血虚是怎么引起的气血亏虚是什么原因引起的女性气血两虚的症状什么叫气血两虚女人气血虚怎么食补气血虚是什么意思气血两虚吃什药