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 相关文章推荐
如何在Linux上安装Node.js
Apr 01 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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
ajax实现无刷新分页(php)
2010/07/18 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
js实现简单模态框实例
2018/11/16 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
如何用Django处理gzip数据流
2021/01/29 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
广告语设计及教案
2014/03/21 职场文书
活动总结报告格式
2014/05/09 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
毕业实习感受与体会
2015/05/26 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
如何理解及使用Python闭包
2021/06/01 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python