jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】


Posted in Javascript onMarch 09, 2017

本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts之2D回归直线的散点</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(){
     $('#scatterLine').highcharts({
       chart: {
       },
       xAxis: { //设置X轴最小值和最大值
         min: -0.5,
         max: 5.5
       },
       yAxis: { //设置Y轴最小值和最大值
         min: 0,
         max: 5
       },
       title: {
         text: '(3water.com)回归直线的散点'
       },
       series: [{
         type: 'line',
         name: '回归直线',
         data: [[0, 1.11], [5, 4.51]],
         marker: {
           enabled: true
         },
         states: {
           hover: {
             lineWidth: 4  //设置折线的宽度
           }
         },
         enableMouseTracking: true
       }, {
         type: 'scatter',
         name: '散点',
         data: [2.2, 1.5, 3.8, 1.5, 3.9, 4.2,5.6],
         marker: {
           radius: 10 //散点的半径
         }
       }]
     });
   });
</script>
</head>
<body>
  <div id="scatterLine" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
js实现简单的二级联动效果
Mar 09 #Javascript
jquery表单提交带错误信息提示效果
Mar 09 #Javascript
AngularJS 防止页面闪烁的方法
Mar 09 #Javascript
js读取json文件片段中的数据实例
Mar 09 #Javascript
JavaScript实现动态增删表格的方法
Mar 09 #Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
You might like
PHP中cookies使用指南
2007/03/16 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python合并字符串的3种方法
2015/05/21 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
pandas的排序和排名的具体使用
2019/07/31 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
如何提高SQL Server的安全性
2016/07/25 面试题
法律专业推荐信范文
2013/11/29 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
市场营销专业自荐书
2014/06/10 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
房屋租赁协议书
2014/10/18 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
行为规范主题班会
2015/08/13 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android