javascript ChartJs圆环图分析数据集

blmhpbnm 于 2023-01-01 发布在 Java

关注(0)|答案(3)|浏览(155)

我正在尝试创建一个以自定义对象为数据的圆环图。我不知道这是一个错误还是我太笨了。😩如果图表的类型是“条形图”，则一切都按预期工作，但如果我将其更改为圆环图，则图表区为空。
下面是条形图的代码：

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: {
        
    }
});

这就是我的甜甜圈

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: {
        
    }
});

圆环图不支持解析吗？我在文档中找不到相关信息。
谢谢，克里斯蒂安

JavaScript

来源：https://stackoverflow.com/questions/69232060/chartjs-doughnut-parsing-datasets

3条答案

按热度按时间

xt0899hw1#

关于数据结构，Chart.js文档指出：
对于饼图（和圆环图），数据集需要包含数据点的数组。数据点应为数字（...）
因此，解析没有意义，可能不受支持。可以通过将数据Map到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>

赞(0）回复(0）举报 2023-01-01

yuvru6vn2#

目前chart.js不支持解析饼图/圆环图的对象表示法。
几天前已经有了一个pr，它被合并到了master中，所以一旦chart.js的新版本发布，3.5.1版本之后的任何版本都会有这个变化，然后你就可以使用你的对象了。
否则，您可以按照@uminder建议的路线自行绘制数据Map

赞(0）回复(0）举报 2023-01-01

py49o6xq3#

正如Christian提到的，它从3.6.0（2021-10-24，参见https://github.com/chartjs/Chart.js/issues/9440）版本开始可用，内容如下：

options: {
      parsing: {
        key: "the-label-key',
      }
    }

参考官方文件：https://www.chartjs.org/docs/latest/general/data-structures.html

赞(0）回复(0）举报 2023-01-01

我来回答

javascript ChartJs圆环图分析数据集

3条答案

相关问题

热门标签

最新问答