当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 1:29:59

散点图

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

代码：

<!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到16title: "房价与面积散点图"  
};  // 使用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到16title: "房价与面积折线图"  
};  // 使用Plotly显示图表  
Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的div中显示图表，数据为data，布局为layout  
</script>  </body>  
</html>

运行结果：