时间戳

首页 > 解决方案 > CSV 中的数据分组（D3.js 和 Chart.js）

javascript - CSV 中的数据分组（D3.js 和 Chart.js）

问题描述

我有一个这样的csv文件：

id,Annee,Origine,Pax_Total
1,2014,AJACCIO,27494
2,2019,AJACCIO,57525
3,2014,ANGERS,1724
4,2019,ANGERS,4725
...

我想对每个 Origine 进行分组并获得 Pax_Total 的总和。目的是使用 Chart.js 创建条形图。

有我的代码：

d3.csv("https://raw.githubusercontent.com/gflowiz/mapathon/master/DGAC_flux.csv")
.then(makeChart);

function makeChart(ville) {
  
  var sumPaxTotal = d3.rollups(ville, v => d3.sum(v, d => d.Pax_Total), d => d.Origine)
  var villeOrigine =  d3.groups(ville, d => d.Origine)
  
  var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'horizontalBar',
      option:{
          maintainAspectRatio: true,
          legend: {
              display: false
            }
      },
      data: {
        labels: villeOrigine,
        datasets: [
          {
            data: sumPaxTotal,
            backgroundColor: '#F15F36'
          }
        ]
      }
    });
console.log(sumPaxTotal)
}

这是 sumPaxTotal 的控制台日志。

我认为存在“阵列”问题，经过大量研究，我还不清楚......

谢谢你的帮助。

标签： javascriptcsvd3.jschart.js

解决方案

使用Arrays.map()，可以按如下方式完成：

data: {
  labels: sumPaxTotal.map(v => v[0]),
  datasets: [{
    label: 'DGAC-Flux',
    data: sumPaxTotal.map(v => v[1]),
    backgroundColor: '#F15F36'
  }]
}

请在下面查看您修改后的代码：

d3.csv("https://raw.githubusercontent.com/gflowiz/mapathon/master/DGAC_flux.csv").then(makeChart);

function makeChart(ville) {
  let sumPaxTotal = d3.rollups(ville, v => d3.sum(v, d => d.Pax_Total), d => d.Origine);
  let chart = new Chart('chart', {
    type: 'horizontalBar',
    data: {
      labels: sumPaxTotal.map(v => v[0]),
      datasets: [{
        label: 'DGAC-Flux',
        data: sumPaxTotal.map(v => v[1]),
        backgroundColor: '#F15F36'
      }]
    },
    options: {
      legend: {
        display: false
      }
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="250"></canvas>

推荐阅读