基于echarts的鸢尾花数据可视化

最新推荐文章于 2023-08-07 23:24:42 发布

Small Sun

最新推荐文章于 2023-08-07 23:24:42 发布

阅读量896

点赞数

分类专栏： html 文章标签：可视化数据可视化

本文链接：https://blog.csdn.net/m0_58204203/article/details/118692245

版权

本博客通过实战演示如何使用d3.min.js读取文件并与echarts结合，展示了鸢尾花数据的长宽分布，并运用图表展示不同品种的特征。通过mean操作分析了setosa、versicolor和virginica的平均值。

摘要由CSDN通过智能技术生成

实验目的：

掌握d3.min.js的读入文件的方法

掌握echarts的可视化的流程

实验原理：

对鸢尾花的长宽按照要求处理

引入d3.min.js文件

完整的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鸢尾花数据可视化</title>
		<script src="echarts/echarts.min.js"></script>#配置路径下echarts.min.js
		 <script src="echarts/d3.min.js"></script>
	</head>
	<body>
	<div id="main" style="width: 800px;height:600px;"></div>
	<script>
		var chartDom = document.getElementById("main");
		var myChart = echarts.init(chartDom);
     d3.csv("Data/iris.csv",function(error,data){
	    //console.log(data);
		var setosa = [];
		var versicolor = [];
		var virginica = [];
		var petal_length = [];
		for (var i=0;i<data.length;i++){
		    petal_length.push(parseFloat(data[i].PetalLength));
		    if(i<50){
		        setosa[i]=[parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
		    }
		    else if (i>=100){
		        virginica[i-100] = [parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
				//virginica[i]=[parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
		    }
		    else{
		        versicolor[i-50] = [parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
		    }
		}
		console.log(setosa);
		console.log(versicolor);
		co