chart.js - 圆环图未使用 csv 数据 chart.js 呈现

Question

我正在尝试使用 csv 文件中的数据创建一个带有 chart.js 的圆环图。到目前为止，以下是我的脚本，但它不起作用。任何指导都值得赞赏。

<script>
var file='donut.csv';
d3.csv(file).then(makeChart); //use d3.csv to read file
function makeChart(types){
var can=types.map(function(d){return d.cancelled});
var suc=types.map(function(d){return d.success});
var fa=types.map(function(d){return d.failed});
 {
var chart=new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
        labels: ["Cancelled","Success", "Failed"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#3cba9f","#8e5ea2"],
          data: [can,suc,fa]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Weekly  Status'
      }
    }
}
}
);
</script>

我的 donut.csv 如下所示：

cancelled,300,
success,1000,
failed,20,

标签： chart.js

Answer 1

由于您的CSV数据没有标头，因此您应该使用它d3.text来加载数据，然后d3.csvParseRows将其解析为JSON数组（请参阅https://stackoverflow.com/a/13870360/2358409）。要从JSON数组中提取数据值，您可以使用Array.map.

data: d3.csvParseRows(types).map(v => v[1])

请查看您修改后的代码，看看它是如何工作的。

d3.text("https://raw.githubusercontent.com/uminder/testdata/main/so/csv/donut.csv").then(makeChart);
function makeChart(types) {
  new Chart('doughnut-chart', {
    type: 'doughnut',
    data: {
      labels: ['Cancelled', 'Success', 'Failed'],
      datasets: [{
        label: 'Population (millions)',
        backgroundColor: ['#3e95cd', '#3cba9f', '#8e5ea2'],
        data: d3.csvParseRows(types).map(v => v[1])
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Weekly  Status'
      }
    }
  });
}

<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="doughnut-chart" height="90"></canvas>