<!DOCTYPE html>
<html>
<head>
<title>计算基尼系数</title>
<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
<script>
var myChart;
function giniCoefficient(data) {
var cum_data = Array.from({ length: data.length + 1 }, function (_, i) {
return i === data.length ? 0 : data[i];
}).sort(function (a, b) { return a - b; }).reduce(function (acc, val) {
acc.push((acc[acc.length - 1] || 0) + val);
return acc;
}, []);
var sum_data = cum_data[cum_data.length - 1];
var xarray = Array.from({ length: cum_data.length }, function (_, i) { return i / (cum_data.length - 1); });
var upper = xarray;
var yarray = cum_data.map(function (val) { return val / sum_data; });
console.log(xarray, yarray);
var B = trapz(yarray, xarray);
console.log("B的面积:", B);
var A = 0.5 - B;
console.log("A的面积:", A);
var G = A / (A + B);
if (myChart) {
myChart.destroy();
}
const canvas = document.getElementById('giniChart');
canvas.width = 30;
canvas.height = 20;
var ctx = canvas.getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xarray,
datasets: [
{
label: '洛伦茨曲线的面积',
data: yarray,
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.5)',
fill: true
},
{
label: '绝对平等线面积与洛伦茨曲线面积之差',
data: xarray,
borderColor: 'red',
backgroundColor: 'rgba(255, 0, 0, 0.5)',
fill: true,
}
]
},
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: '个数累计百分比'
}
},
y: {
display: true,
title: {
display: true,
text: '数值累计百分比'
}
}
},
title: {
display: true,
text: 'Gini Coefficient'
}
}
});
return G;
}
function trapz(y, x) {
if (y.length !== x.length) {
throw new Error('The length of y and x must be the same');
}
var n = y.length;
var s = 0;
for (var i = 1; i < n; i++) {
s += (x[i] - x[i - 1]) * (y[i] + y[i - 1]);
}
return s / 2;
}
function calculateGini() {
var values = document.getElementById("inputValues").value;
var data = values.split(",").map(Number);
var result = giniCoefficient(data)
document.getElementById("result").innerHTML = "基尼系数: " + result;
}
</script>
</head>
<body>
<h1>计算基尼系数</h1>
<label for="inputValues">输入数据(用逗号分隔):</label>
<input type="text" id="inputValues"><br><br>
<button onclick="calculateGini()">计算</button><br><br>
<div id="result"></div>
<dic style="width: 600px; display:block">
<canvas id="giniChart"></canvas>
</dic>
</body>
</html>