使用js echarts 绘制一个数据正态分布图
以下是一个简单的使用 echarts 绘制数据正态分布图的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正态分布图</title>
<!-- 引入 echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 生成一组数据，以正态分布为例
var data = [];
var mean = 50; // 均值
var stdDev = 10; // 标准差
for (var i = 0; i < 10000; i++) {
data.push(mean + stdDev * Math.random() * (Math.random() > 0.5 ? 1 : -1));
}
// 统计数据并生成频率分布表
var freqTable = {};
var intervalWidth = 10; // 分组宽度
for (var i = 0; i < data.length; i++) {
var intervalIndex = Math.floor(data[i] / intervalWidth);
if (!freqTable[intervalIndex]) {
freqTable[intervalIndex] = 0;
}
freqTable[intervalIndex]++;
}
// 将频率转换为频率密度
var freqDensityTable = [];
for (var intervalIndex in freqTable) {
if (freqTable.hasOwnProperty(intervalIndex)) {
var freqDensity = freqTable[intervalIndex] / (data.length * intervalWidth);
freqDensityTable.push([intervalIndex * intervalWidth, freqDensity]);
}
}
// 使用 echarts 绘制正态分布图
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
title: {
text: '正态分布图'
},
xAxis: {
name: '数值'
},
yAxis: {
name: '频率密度'
},
series: [{
type: 'line',
data: freqDensityTable
}]
});
</script>
</body>
</html>
运行以上代码可以得到一个简单的数据正态分布图。其中，我们首先生成了一组数据，以正态分布为例。然后，我们统计了数据并生成了频率分布表，再将频率转换为频率密度，最后使用 echarts 绘制了正态分布图。在绘制过程中，我们需要设置 x 轴和 y 轴的名称，并将频率密度表示为线型图。
原文地址: https://www.cveoy.top/t/topic/b5XA 著作权归作者所有。请勿转载和采集!