jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】


Posted in Javascript onMarch 08, 2017

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

1、示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带Label的折线图</title>
<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(){
   $('#lineDefaultChart').highcharts({
    chart: {
     type: 'line'
    },
    title: {
     text: '(3water.com)统计某周水果销售情况'
    },
    subtitle: {
     text: '水果销量'
    },
    xAxis: {
     categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
     title: {
      text: '单位(kg)'
     }
    },
    tooltip: {
     enabled: true,
     formatter: function() {
      return '<b>'+ this.series.name +'</b><br/>'+
       this.x +': '+ this.y +'kg';
     }
    },
    legend: {
     layout: 'vertical',
     align: 'bottom',
     verticalAlign: 'bottom',
     borderWidth: 10
    },
    series: [{
     name: '苹果',
     data: [98,25,69,45,15,78,67]
    }, {
     name: '橘子',
     data: [46,78,16,85,67,24,17]
    }, {
     name: '桃子',
     data: [19,54,74,18,34,90,34]
    }, {
     name: '梨子',
     data: [63,52,90,65,47,34,97]
    }, {
     name: '荔枝',
     data: [56,74,99,41,43,65,78]
    }]
   });
  });
</script>
</head>
<body>
 <div id="lineDefaultChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
You might like
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
利用JS实现数字增长
2016/07/28 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python运算符重载用法实例分析
2015/06/01 Python
python 调用c语言函数的方法
2017/09/29 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python 异或加密字符串的实例
2018/10/14 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
档案信息化建设方案
2014/05/16 职场文书
少先队活动总结
2014/08/29 职场文书
小学班级管理心得体会
2016/01/07 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
JavaScript异步操作中串行和并行
2021/11/20 Javascript