圆环图未使用csv data chart.js进行渲染

我正在尝试使用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>

---

由于您的

CSV

数据没有标题，因此应该使用加载数据，然后使用将其解析为

JSON

数组（请参阅）。要从

JSON

数组中提取数据值，可以使用

请看一下你修改过的代码，看看它是如何工作的

d3.text（“https://raw.githubusercontent.com/uminder/testdata/main/so/csv/donut.csv）然后（makeChart）；
函数生成图（类型）{
新图表（‘油炸圈饼图表’{
键入：“甜甜圈”，
数据：{
标签：[“已取消”、“成功”、“失败”]，
数据集：[{
标签：“人口（百万）”，
背景色：['3e95cd'、'3cba9f'、'8e5ea2']，
数据：d3.csvParseRows（types）.map（v=>v[1]）
}]
},
选项：{
标题：{
显示：对，
文本：“每周状态”
}
}
});
}

非常感谢Uminder改进了代码并指出了缺失的部分。如果您不介意，请告诉我，如果我的csv发生变化，我如何用新数据更新图表？调用just update（）函数？@新手：请看下面关于

chart.update（）

：和

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

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