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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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函数)
2006/10/09 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jquery实现图片预加载
2015/12/25 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python 连连看连接算法
2008/11/22 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python中对数据进行各种排序的方法
2019/07/02 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
人事专员岗位职责
2015/02/03 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Linux中如何安装并部署Redis
2022/04/18 Servers
Spring 使用注解开发
2022/05/20 Java/Android