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

【问题标题】：ng2-charts doughnut chart with different data per seriesng2-charts 甜甜圈图，每个系列具有不同的数据
【发布时间】：2021-12-17 07:45:55
【问题描述】：

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

    }

  ]

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

我终于让它与版本 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';

【讨论】：

【解决方案2】：

您可以将对象表示法与自定义工具提示标签回调一起使用：

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>

【讨论】：

这看起来可行，我得弄清楚如何将它与 ng2-charts 一起使用。谢谢你的帮助，我会让你知道结果如何。
MB 忘记了那部分，您需要安装 ng2charts 的 next 分支并至少使用 v3.6 的 chart.js 才能使用它
所以我更新了我的 chart.js 和 ng2-charts 包并完全破坏了一切。肯定有些不同。
当你说“下一个”分支时，你指的是哪一个？我刚刚安装了2.4.2版本。
所以我将错误归结为 chartType 而不是画布的属性。任何想法？我已经导入了 NgChartModule。