I have a sunburst graph in echarts which looks something like this: 
I wanted to modify this so there is one single button and as you click on it, it displays all the nodes one by one, so first the year then the months, then days and so on.
Here is the code for my graph:
var data = [
{
"name": 2017,
"children": [
{
"name": "Jun",
"children": [
{
"name": 20,
"children": [
{
"name": "13:55",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 3,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 5
}
],
"itemStyle": {},
"value": 10
}
],
"day": 20,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 26,
"children": [
{
"name": "12:11",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 5,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 7
}
],
"itemStyle": {
"color": "#fff"
},
"value": 12
}
],
"day": 26,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 28,
"children": [
{
"name": "9:28",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "summ. of method POST modified",
"original": "summ. of method POST modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 1
}
],
"day": 28,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "10:30",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "new required req param",
"original": "new-required-request-parameter",
"value": 6,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
},
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 6,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 12
}
],
"itemStyle": {
"color": "#fff"
},
"value": 12
}
],
"day": 28,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
},
"value": {
"$numberDouble": "NaN"
}
}
],
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "Jul",
"children": [
{
"name": 14,
"children": [
{
"name": "10:57",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "new required req param",
"original": "new-required-request-parameter",
"value": 1,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
},
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 4,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
}
],
"itemStyle": {
"color": "#fff"
},
"value": 5
}
],
"day": 14,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 17,
"children": [
{
"name": "13:11",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 1,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 1
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "path added",
"original": "path added",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 2
}
],
"day": 17,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "16:22",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 17,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
},
"value": {
"$numberDouble": "NaN"
}
},
{
"name": 27,
"children": [
{
"name": "12:29",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "path added",
"original": "path added",
"value": 5,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 5
}
],
"itemStyle": {
"color": "#fff"
},
"value": 10
}
],
"day": 27,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"year": 2017,
"itemStyle": {
"color": ""
}
},
],
"itemStyle": {
"color": ""
}
},
{
"name": 2018,
"children": [
{
"name": "May",
"children": [
{
"name": 15,
"children": [
{
"name": "16:32",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "summ. of method GET modified",
"original": "summ. of method GET modified",
"value": 3,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 6
}
],
"itemStyle": {
"color": "#fff"
},
"value": 6
}
],
"day": 15,
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
},
{
"name": 21,
"children": [
{
"name": "10:39",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 1
}
],
"day": 21,
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
},
],
"year": 2018,
"itemStyle": {
"color": ""
}
},
{
"name": "Aug",
"children": [
{
"name": 1,
"children": [
{
"name": "8:20",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 8,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 8
}
],
"itemStyle": {
"color": "#fff"
},
"value": 8
}
],
"day": 1,
"month": "Aug",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "Aug",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"itemStyle": {
"color": ""
}
},
{
"name": 2021,
"children": [
{
"name": "Feb",
"children": [
{
"name": 11,
"children": [
{
"name": "14:2:9",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
},
{
"name": "14:8:14",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
},
{
"name": "15:59:56",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
}
],
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
},
"value": {
"$numberDouble": "NaN"
}
}
],
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
}
],
"itemStyle": {
"color": "#a8a8a8"
}
}
];
option = {
title: {
textStyle: {
fontSize: 24,
fontFamily: 'Times New Roman',
align: 'center'
},
subtextStyle: {
align: 'center',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'Times New Roman',
}
},
series: {
type: 'sunburst',
data: data,
width:2000,
height:1600,
radius: [0, '60%'],
sort: undefined,
label: {
formatter: '{b}',
position: 'inside',
distance: 0,
rotate: 'radial'
},
levels: [
{},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
label: {
formatter: '{b}',
position: 'outside',
distance: 2, // Adjust the distance to increase the gap between the chart and the labels
depth: 0, // Adjust this value to set the depth level for labels
rotate: 'radial' // Rotate the labels around the sunburst chart
}
}
]
}
};
Is there a way this could be achieved, I am not very good with javascript so any suggestions or ideas will be greatly appreciated.
from Expand sunburst echarts on each click
No comments:
Post a Comment