jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】


Posted in Javascript onMarch 08, 2017

本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果。分享给大家供大家参考,具体如下:

1、示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带Label的折线图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
  $(function(){
   $('#lineDefaultChart').highcharts({
    chart: {
     type: 'line'
    },
    title: {
     text: '(3water.com)统计某周水果销售情况'
    },
    subtitle: {
     text: '水果销量'
    },
    xAxis: {
     categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
     title: {
      text: '单位(kg)'
     }
    },
    tooltip: {
     enabled: true,
     formatter: function() {
      return '<b>'+ this.series.name +'</b><br/>'+
       this.x +': '+ this.y +'kg';
     }
    },
    legend: {
     layout: 'vertical',
     align: 'bottom',
     verticalAlign: 'bottom',
     borderWidth: 10
    },
    series: [{
     name: '苹果',
     data: [98,25,69,45,15,78,67]
    }, {
     name: '橘子',
     data: [46,78,16,85,67,24,17]
    }, {
     name: '桃子',
     data: [19,54,74,18,34,90,34]
    }, {
     name: '梨子',
     data: [63,52,90,65,47,34,97]
    }, {
     name: '荔枝',
     data: [56,74,99,41,43,65,78]
    }]
   });
  });
</script>
</head>
<body>
 <div id="lineDefaultChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

Javascript 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP一些有意思的小区别
2006/12/06 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
做网页的一些技巧(续)
2007/02/01 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
Promise扫盲贴
2019/06/24 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python中异常重试的解决方案详解
2017/05/05 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
实践Vim配置python开发环境
2018/07/02 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
三八节标语
2014/06/27 职场文书
幼儿园辞职信
2015/05/13 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers