chart.js - 具有不同扇区大小的饼状甜甜圈图

Question

大家好，

我期待创建一个如下图所示的图表。我正在谷歌上搜索哪个图表可以选择创建这种类型的图表，与每个弧内的文本文本不完全相同，但为空。

我主要看的是chartjs，因为我是使用任何图表库的新手，我还没有理解其中的选项，这意味着如果有人有建议，这将对我有所帮助。

谢谢大家

Answer 1

如果你想使用另一个库 d3.js。你应该看看这个：

https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/doughnut-chart

根据您的要求编辑半径值。

let pie = d3.layout.pie()
  .startAngle(Math.PI / 2)
  .endAngle(Math.PI * 2 + Math.PI / 2)
  .value((d) => {
    return d.value;
  }).sort(null);

let arc = d3.svg.arc()
  .outerRadius(150)
  .innerRadius(70);

let g = svg.selectAll('.arc')
  .data(pie(piedata))
  .enter().append('g')
  .attr('class', 'arc');

Answer 2

您可以使用 ECharts。这也有一个 vue 版本。他们正是这种类型的图表。

另一种可能性是为这种图表创建一个 chartjs 插件。