Berke-Alp commented on issue #9700:
URL: https://github.com/apache/echarts/issues/9700#issuecomment-1342359082
Hi, I'm having a problem with my sunburst chart. I'm using this post because
I think pie and sunburst is almost the same thing.
So I'm initializing the chart in this function (ajax success function)
```js
function (data) {
let chartDom = document.getElementById('canvas_TREEMAP');
window.sunchart = echarts.init(chartDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
let option;
// Here I set all the data.itemStyle properties to use
canvas width and height
for (let i = 0; i < data.length; i++) {
data[i].itemStyle.color.x = $(chartDom).width() / 2;
data[i].itemStyle.color.y = $(chartDom).height() / 2;
}
console.log(data)
option = {
tooltip: {
show: true,
trigger: "item",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
if(params.data.progress === undefined)
return;
return
`<b>${params.data.name}</b><br>Weight: ${params.data.weight}%<br>
Progress: ${params.data.progress}%
`;
},
},
series: {
type: 'sunburst',
data: data,
radius: [0, '90%'],
itemStyle: {
borderRadius: 5,
borderWidth: 2
},
label: {
show: true,
rotate: 'radial'
},
levels: [
{},
{
r0: '5%',
r: '50%',
},
{
r0: '50%',
r: '60%',
label: {
position: 'outside',
silent: false
},
}
]
}
};
option && window.sunchart.setOption(option);
}
```
The data is coming from a php api and I create the data like this:
```php
$s = [
"name" => $group['ad'],
"children" => [],
"value" => $groupWeight,
"weight" => $groupWeight,
"itemStyle" => [
"color" => [
"type" => "radial",
"x" => 0.5,
"y" => 0.5,
"r" => $groupProgress / 100,
"colorStops" => [
["offset" => 0.9, "color" => $group['renk']],
["offset" => 1, "color" => "#939393"],
],
"global" => true,
]
],
"progress" => $groupProgress
];
```
The reason I change the data.itemStyle.color.x and y is I cannot calculate
the width and height of the canvas on the backend.
When global is false, radial gradient works but the positions are wrong but
when I set it to true, this happens:
The gray area is where I want the gradient to be applied.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
