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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
VUE长按事件需求详解
Oct 18 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 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 设计模式之 工厂模式
2008/12/19 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
node网页分段渲染详解
2016/09/05 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python 的topk算法实例
2020/04/02 Python
pandas按条件筛选数据的实现
2021/02/20 Python
scrapy-splash简单使用详解
2021/02/21 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
大学生职业生涯规划书模版
2013/12/30 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Python日志模块logging用法
2022/06/05 Python