馅饼甜甜圈图表与不同的扇区大小

时间:2017-09-11 18:07:42

标签: chart.js vue-chartjs

enter image description here

大家好,

我期待创建如下图所示的图表。我正在谷歌搜索哪个图表可以选择创建这种类型的图表,没有完全类似于每个弧内的文本文本,但是为空。

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

全部谢谢

2 个答案:

答案 0 :(得分:0)

如果你想使用另一个库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');

答案 1 :(得分:0)

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

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