All geek questions in one place

3-layer donut map in Highcharts

Highcharts supports donut charts, essentially one inner pie chart with a second pie, shown as a donut surrounding it. donut chart from Highcharts demo site

Is it possible to create a three-layer map of donuts, i.e. a pie chart in the middle, a donut surrounding the pie, and another donut surrounding the first?

I suspect this is not possible, because their option plotOptions.pie.innerSize assumes that they only support internal size and external size, not internal size, average size, and external size. But maybe I'm missing something.

+6
source share
3 answers

Just try to install a few more episodes and play a little with the size and internal size, see: http://jsbin.com/oyudan/165/edit

series: [{ name: 'Browsers', data: [11,23,14,15], size: '40%', dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: 'Versions', data: [4,7,11,11,2,3,3,8,5,5,5], size: '70%', innerSize: '40%', dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; } } }, { name: 'Versions', data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3], size: '80%', innerSize: '70%', dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; } }
+10
source

You can do the same using two charts.

one chart will have a pie and a donut, and the second one will only have a donut chart, you can control them by providing the same center and radius to keep them in sync.

hope this works for you.

0
source

Another way to achieve this is to use the Sunburst series type (Highcharts 6.0.0 or later).

Here you specify the data with the id parameter, if they have a series below them, and for children you specify the parent parameter.

For example ( JSFiddle , documentation ):

 $(function () { var data = [ { name: 'Anakin Skywalker', id: 'father' }, { name: 'Luke Skywalker', id: 'child-1', parent: 'father', value: 1 }, { name: 'Leia Organa', id: 'child-2', parent: 'father', value: 3 }, { name: 'Ben Skywalker', parent: 'child-1', value: 1 }, { name: 'Jaina Solo', parent: 'child-2', value: 1 }, { name: 'Jacen Solo', parent: 'child-2', value: 1 }, { name: 'Anakin Solo', parent: 'child-2', value: 1 } ]; $('#container').highcharts({ chart: { type: 'sunburst' }, title: { text: 'Family tree' }, series: [{ data: data }] }); });

Or look at this very complex example of the world population for its potential.

0
source

Source: https://habr.com/ru/post/948593/

More articles:


All Articles