具有不同扇区大小的饼状甜甜圈图答案

【问题标题】：Pie Donut chart with different sector sizes具有不同扇区大小的饼状甜甜圈图
【发布时间】：2017-09-11 18:07:42
【问题描述】：

大家好，

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

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

谢谢大家

【问题讨论】：

天哪，你有任何关于为此创建插件的线索吗？
你可以使用另一个库 d3.js 吗？

标签： chart.js vue-chartjs

【解决方案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');

【讨论】：

【解决方案2】：

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

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

【讨论】：