Web 基尼系数的计算

html 复制代码
<!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);
      //pl.plot(xarray, yarray)
      //pl.plot(xarray, upper)
      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>