jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】


Posted in Javascript onMarch 07, 2017

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

1、 实例源码:

<!DOCTYPE html>
<html>
  <head>
    <title>HighCharts基本折线图</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <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 () {
        $('#lineChart').highcharts({
          title: {
            text: '( 3water.com统计 )月平均温度',
            x: -20 //center
          },
          subtitle: {
            text: '省级',
            x: -20
          },
          xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            title: {
              text: '温度 (°C)'
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          tooltip: {
            valueSuffix: '°C'
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            backgroundColor:'#CCCCCC',
            borderWidth: 2
          },
          series: [{
            name: '湖南',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
            name: '湖北',
            data: [-2.8, 0.8, 5.7, 11.3, 17.0, 36.0, 30.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
            name: '广东',
            data: [-1.9, 0.6, 3.5, 8.4, 13.5, 25.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
            name: '广西',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 34.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
        });
      });
    </script>
  </head>
  <body>
    <div id="lineChart" style="min-width:700px;height:480px"></div>
  </body>
</html>

2、 运行效果图:

jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】

Javascript 相关文章推荐
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
js Dom实现换肤效果
Oct 21 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
新手学python应该下哪个版本
2020/06/11 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
工地安全检查制度
2014/02/04 职场文书
大学生先进事迹材料
2014/02/16 职场文书
业务员的岗位职责
2014/03/15 职场文书
房产分割协议书范文
2014/11/21 职场文书
国王的演讲观后感
2015/06/03 职场文书
高中军训感想
2015/08/07 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers