每个系列具有不同数据的 ng2-charts 甜甜圈图

Question

我正在尝试使用 ng2-charts 创建圆环图，它有两个系列显示与下面找到的数组类似的内容。只要数据数组中的项目数等于标签数，我就可以渲染两个系列。但是我不能有一个系列，外圈显示 3 个数字，内圈有 6 个数字和不同的标签。还有其他人有这方面的经验吗？

public summaryDataSets = [

    {

      labels: ['parent1', 'parent2', 'parent3'],

      data: [34, 50, 26]

    },

    {

      labels: ['child1_1', 'child1_2', 'child2_1', 'child2_2', 'child3_1', 'child3_2'],

      data: [14, 20, 30, 20, 10, 16]

    }

  ]

Answer 1

您可以为此使用对象表示法以及自定义工具提示标签回调：

var options = {
  type: 'doughnut',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
          id: 'parent1',
          key: 55
        }, {
          id: 'parent2',
          key: 55
        }, {
          id: 'parent3',
          key: 30
        }],
        borderWidth: 1,
      },
      {
        label: '# of Points',
        data: [{
          id: 'child1',
          key: 55
        }, {
          id: 'child2',
          key: 55
        }, {
          id: 'child3',
          key: 30
        }, {
          id: 'child4',
          key: 55
        }, {
          id: 'child5',
          key: 55
        }, {
          id: 'child6',
          key: 30
        }],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`)
        }
      }
    },
    parsing: {
      key: 'key'
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

Answer 2

我终于让它与版本 2.X 一起工作。我基本上展平了分层数据结构，并用零填充了多个数据集数组。下面的代码将为您提供双层圆环图，其中第二层显示第一层部分的拆分。

public summaryTreeChartLabels: Label[] = ['asdf', 'sdgf', 'dfhg', 'asdf_1', 'asdf_2', 'sdgf_1', 'sdgf_2', 'dfgh_1', 'dfgh_2'];

public summaryTreeChartData = [[34, 50, 26, 0,0,0,0,0,0], [0,0,0, 14, 20, 30, 20, 10, 16]];

public summaryTreeChartType: ChartType = 'doughnut';

每个系列具有不同数据的 ng2-charts 甜甜圈图

ng2-charts doughnut chart with different data per series

angular

chart.js

ng2-charts