javascript - ChartJs Donut 解析数据集

Question

我正在尝试创建一个以自定义对象作为数据的圆环图。不知道是bug还是我傻。 😩如果图表的类型是“bar”，一切都按预期工作，但如果我将其更改为 donut ，则图表区域为空。

这是条形图的代码:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: '# of Votes',
            data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
            parsing:{
                yAxisKey:'vX',
              xAxisKey: 'n'
            },
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

那是我的 donut :

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            label: '# of Votes',
            data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
            parsing:{
                yAxisKey:'vX',
              
            },
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

圆环图不支持解析吗？我在文档中找不到关于此的信息。

谢谢，克里斯蒂安

Answer 1

关于 data structures ，Chart.js 文档说:

For a pie (and doughnut) chart, datasets need to contain an array of data points. The data points should be a number (...)

因此，解析没有意义并且可能不受支持。该问题可以通过将您的数据映射到 labels 和 data 来解决，如下所示。

var data = [{vX:12, n:'vx'}, {vX:13, n:'vx2'}];

new Chart('myChart', {
  type: 'doughnut',
  data: {
    labels: data.map(v => v.n),
    datasets: [{
      label: '# of Votes',
      data: data.map(v => v.vX),     
      borderWidth: 1
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>