线性图 -- 通过javascript实现

最新推荐文章于 2024-10-16 16:26:58 发布

宇宙核

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量201

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lpx666168/article/details/141097914

版权

斜率（slope）

斜率是图形的角度。

斜率是线性图中的a值：

y = ax

在本例中，斜率 = 1.2

代码：

<!DOCTYPE html>  
<html>  
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  
  
<body>  
<div id="myPlot" style="width:100%;max-width:700px"></div>  
  
<script>  
var slope = 1.2; // 斜率值  
var xValues = []; // x轴的值数组  
var yValues = []; // y轴的值数组  
  
// 生成数据  
for (var x = 0; x <= 10; x += 1) {  
  xValues.push(x); // 将x值添加到x轴数组  
  yValues.push(x * slope); // 计算对应的y值并添加到y轴数组  
}  
  
// 定义数据  
var data = [{  
  x: xValues, // x轴数据  
  y: yValues, // y轴数据  
  mode: "lines" // 绘制模式为线条  
}];  
  
// 定义布局  
var layout = {title: "斜率=" + slope}; // 设置图表标题 
  
// 使用Plotly显示图表  
Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的div中显示图表，数据为data，布局为layout  
</script>  
  
</body>  
</html>

运行结果：

截距是图形的起始值。

截距是线性图中的b值：

y = ax + b

在本例中，斜率 = 1.2 且截距 = 2

代码：

<!DOCTYPE html>  
<html>  
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  
  
<body>  
<div id="myPlot" style="width:100%;max-width:700px"></div>  
  
<script>  
var slope = 1.2; // 斜率值  
var intercept = 7; // 截距值  
var xValues = []; // x轴的值数组  
var yValues = []; // y轴的值数组  
  
// 生成数据  
for (var x = 0; x <= 10; x += 1) {  
  xValues.push(x); // 将x值添加到x轴数组  
  yValues.push(x * slope + intercept); // 计算对应的y值（y = ax + b）并添加到y轴数组  
}  
  
// 定义数据  
var data = [{  
  x: xValues, // x轴数据  
  y: yValues, // y轴数据  
  mode: "lines" // 绘制模式为线条  
}];  
  
// 定义布局  
var layout = {title: "斜率=" + slope + " 截距=" + intercept}; // 设置图表标题为"斜率="加上斜率值和"截距="加上截距值  
  
// 使用Plotly显示图表  
Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的div中显示图表，数据为data，布局为layout  
</script>  
  
</body>  
</html>

运行结果：