散点图、折线图 -- 通过javascript实现

宇宙核

已于 2024-08-10 23:37:06 修改

阅读量341

点赞数 5

文章标签： javascript 开发语言 html

于 2024-08-10 23:32:47 首次发布

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

版权

散点图

散点图适合用于探索数据大局、比较值、发现趋势、模式和变量间关系，是数据分析中直观展示和初步探索的有力工具。

代码：

<!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 xArray = [50,60,70,80,90,100,110,120,130,140,150]; // x轴数据，表示房屋面积（平方米）  
var yArray = [7,8,8,9,9,9,10,11,14,14,15]; // y轴数据，表示房屋价格（单位：百万）  
  
// 定义数据  
var data = [{  
  x:xArray, // x轴数据  
  y:yArray, // y轴数据  
  mode:"markers" // 绘制模式为标记点  
}];  
  
// 定义布局  
var layout = {  
  xaxis: {range: [40, 160], title: "房屋面积（单位：平方米）"}, // x轴设置，范围从40到160 
  yaxis: {range: [5, 16], title: "价格（单位：百万）"}, // y轴设置，范围从5到16
  title: "房价与面积散点图"  
};  
  
// 使用Plotly显示图表  
Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的div中显示图表，数据为data，布局为layout  
</script>  
  
</body>  
</html>

运行结果：

折线图

折线图是一种直观展示数据随时间或其他连续变量变化趋势的图表，它通过连接数据点形成线段，能够清晰地反映数据的连续性、变化方向和速度。

代码：

<!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 xArray = [50,60,70,80,90,100,110,120,130,140,150]; // x轴数据，表示房屋面积（平方米）  
var yArray = [7,8,8,9,9,9,10,11,14,14,15]; // y轴数据，表示房屋价格（单位：百万）  
  
// 定义数据  
var data = [{  
  x:xArray, // x轴数据  
  y:yArray, // y轴数据  
  mode:"lines" // 绘制模式为线条  
}];  
  
// 定义布局  
var layout = {  
  xaxis: {range: [40, 160], title: "房屋面积（单位：平方米）"}, // x轴设置，范围从40到160 
  yaxis: {range: [5, 16], title: "价格（单位：百万）"}, // y轴设置，范围从5到16
  title: "房价与面积折线图"  
};  
  
// 使用Plotly显示图表  
Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的div中显示图表，数据为data，布局为layout  
</script>  
  
</body>  
</html>

运行结果：