HighCharts之2D回归直线的散点


1、实例源码

ScatterLine.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D回归直线的散点</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/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: '回归直线的散点'
             },
             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><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D回归直线的散点</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/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: '回归直线的散点'
             },
             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、实例结果

HighCharts之2D回归直线的散点_jquery