Trójwarstwowa tablica pączków w Highcharts

Question

Highcharts obsługuje tablice pączków, zasadniczo jeden wewnętrzny wykres kołowy z drugim ciastem - pokazany jako pączek - otaczający go. donut chart from the Highcharts demo site

Czy można utworzyć trójwarstwową tablicę donutową, czyli wykres z ciastem w środku, pączkiem otaczającym ciasto i innym pączkiem otaczającym pierwszy?

Podejrzewam, że nie jest to możliwe, ponieważ ich opcja plotOptions.pie.innerSize sugeruje, że obsługują tylko rozmiar wewnętrzny i zewnętrzny, a nie rozmiar wewnętrzny, rozmiar środkowy i rozmiar zewnętrzny. Ale może czegoś brakuje.

Answer 1

Spróbuj ustawić więcej serii i odgrywają natomiast przy wielkości i wewnętrznej wielkości, patrz: 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; 
       } 
      } 

Answer 2

Możesz zrobić to samo za pomocą dwóch wykresów.

Jedna karta będzie zawierała ciasto i pączka, podczas gdy druga będzie miała tylko tabelę pączków możesz nimi zarządzać, zapewniając to samo centrum, jak i promień, tak, że będą synchronizowane.

nadzieję, że będzie pracować dla Ciebie

Answer 3

innej metody, aby osiągnąć to za pomocą Typ serii Sunburst (Highcharts 6.0.0 lub nowszy).

W tym miejscu należy podać dane z parametrem id, jeśli mają one serie poniżej nich, a dla dzieci należy podać parametr parent.

Na przykład (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 
     }] 
    }); 
}); 

Albo zobaczyć this very elaborate example of world population dla jej potencjału.