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 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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 读取文本文件内容并分页显示
2016/01/02 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
bootstrap table小案例
2016/10/21 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
原生JS实现的双色球功能示例
2018/02/02 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
Vue.directive使用注意(小结)
2018/08/31 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python实现数据库跨服务器迁移
2018/04/12 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python正则表达式指南 推荐
2018/10/09 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python