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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
js实现图片懒加载效果
Jul 17 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
JS实现九宫格拼图游戏
Jun 28 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调用API接口实现天气查询功能的示例
2017/09/21 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
axios学习教程全攻略
2017/03/26 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
django框架使用方法详解
2019/07/18 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
机电一体化专业推荐信
2013/12/03 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
售后服务承诺书模板
2014/05/21 职场文书
80后婚前协议书范本
2014/10/24 职场文书
放弃继承权公证书
2015/01/23 职场文书
大学四年个人总结
2015/03/03 职场文书
上班迟到检讨书
2015/05/06 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
教师节简报
2015/07/20 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python