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的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP的PDO连接讲解
2019/01/24 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python实现控制台进度条功能
2016/01/04 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python里dict变成list实例方法
2019/06/26 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python下载库的步骤方法
2019/10/12 Python
NumPy中的维度Axis详解
2019/11/26 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
如何提高python 中for循环的效率
2020/04/15 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
美国批发供应商:Kole Imports
2019/04/10 全球购物
中秋节超市促销方案
2014/01/30 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
环保建议书
2014/03/12 职场文书
婚礼司仪主持词
2014/03/14 职场文书
欢迎家长标语
2014/10/08 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers