初探ML线性图_线性图定义-优快云博客

文章目录

1. 线性图
2. 线性
- 2.1 概述
- 2.2 案例演示
3. 斜率
- 3.1 概述
- 3.2 案例演示
4. 截距
- 4.1 概述
- 4.2 案例演示
5. 实战总结

1. 线性图

机器学习常用线性图表示关系
一个线性图显示线性函数的值：y = ax + b
重要关键词
- Linear (Straight) 线性（直）
- Slope (Angle) 斜率（角度）
- Intercept (Start value) 截距（起始值）

2. 线性

2.1 概述

线性意味着直。线性图是一条直线，它由两个轴构成：x 轴（水平）和 y 轴（垂直）。

2.2 案例演示

创建网页 - linear_graph_1.html
编写网页代码与脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性图演示01</title>
		<script src="scripts/plotly-basic.min.js"></script> 
	</head>
	<body>
		<div id="myPlot" style="width:700px;height:700px;"></div>

		<script>
			const xValues = []; // 定义x值数组
			const yValues = []; // 定义y值数组
			
			// 生成值
			for (let x = 0; x <= 10; x += 1) {
			  xValues.push(x); // 将x值添加到x值数组
			  yValues.push(x); // 将x值添加到y值数组，这里y值与x值相同
			}
			
			// 定义数据
			const data = [{
			  x: xValues, // x值数组
			  y: yValues, // y值数组
			  mode: "lines" // 模式设置为线条
			}];
			
			// 定义布局
			const layout = {title: "y = x"}; // 设置图表标题
			
			// 使用Plotly显示图表
			Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的元素中绘制图表
		</script>
	</body>
</html>

浏览网页，查看效果
plotly-basic.min.js脚本下载
- 链接：https://pan.baidu.com/s/168Lbn2WyN6QnOXX1k0GE6Q
- 提取码：hcun

3. 斜率

3.1 概述

斜率是图形倾斜的角度。斜率是线性图中的a值： y = ax

3.2 案例演示

创建网页 - linear_graph_2.html
编写网页代码与脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性图演示02</title>
		<script src="scripts/plotly-basic.min.js"></script> 
	</head>
	<body>
		<div id="myPlot" style="width:500px;height:750px;"></div>

		<script>
			let slope = 1.5; // 定义斜率
			const xValues = []; // 定义x值数组
			const yValues = []; // 定义y值数组
			
			// 生成值
			for (let x = 0; x <= 10; x += 1) {
			  xValues.push(x); // 将x值添加到x值数组
			  yValues.push(x * slope); // 将x * slope值添加到y值数组，这里y值与x值相同
			}
			
			// 定义数据
			const data = [{
			  x: xValues, // x值数组
			  y: yValues, // y值数组
			  mode: "lines" // 模式设置为线条
			}];
			
			// 定义布局
			const layout = {title: "y = " + slope + "x"}; // 设置图表标题
			
			// 使用Plotly显示图表
			Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的元素中绘制图表
		</script>
	</body>
</html>

浏览网页，查看效果

4. 截距

4.1 概述

截距是图的起始值。线形图的截距就是b值：y = ax + b

4.2 案例演示

创建网页 - linear_graph_3.html
编写网页代码与脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性图演示03</title>
		<script src="scripts/plotly-basic.min.js"></script> 
	</head>
	<body>
		<div id="myPlot" style="width:500px;height:750px;"></div>

		<script>
			let slope = 1.5; // 定义斜率
			let intercept = 2; // 定义截距
			const xValues = []; // 定义x值数组
			const yValues = []; // 定义y值数组
			
			// 生成值
			for (let x = 0; x <= 10; x += 1) {
			  xValues.push(x); // 将x值添加到x值数组
			  yValues.push(x * slope + intercept); // 将x * slope + intercept值添加到y值数组，这里y值与x值相同
			}
			
			// 定义数据
			const data = [{
			  x: xValues, // x值数组
			  y: yValues, // y值数组
			  mode: "lines" // 模式设置为线条
			}];
			
			// 定义布局
			const layout = {title: "y = " + slope + "x + " + intercept}; // 设置图表标题
			
			// 使用Plotly显示图表
			Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的元素中绘制图表
		</script>
	</body>
</html>