编程 Javascript

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源码下载】

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中的Web worker多线程API研究

Dec 06 Javascript

jQuery实现弹出窗口中切换登录与注册表单

Jun 05 Javascript

js实现适用于素材网站的黑色多级菜单导航条效果

Aug 24 Javascript

JS中Json数据的处理和解析JSON数据的方法详解

Jun 29 Javascript

微信小程序五星评分(包括半颗星评分)实例代码

Dec 14 Javascript

AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

Jan 19 Javascript

详解angularjs实现echart图表效果最简洁教程

Nov 29 Javascript

JavaScript实现元素滚动条到达一定位置循环追加内容

Dec 28 Javascript

详解React之key的使用和实践

Sep 29 Javascript

JavaScript学习笔记之图片库案例分析

Jan 08 Javascript

vue store之状态管理模式的详细介绍

Jun 13 Javascript

JS将时间秒转换成天小时分钟秒的字符串

Jul 10 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