You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Yi Shen <sh...@gmail.com> on 2021/03/01 08:59:24 UTC
Re: getBoundingRect on Axis ComponentView
Hi Jonathan,
echarts is rendered synchronously after `setOption`. So you can always use
`view.group.getBoundingRect` to get the bounds after `setOption`.
Or if you wan't to do it before rendering to canvas. There is a stage post
update that can be extended by `registerPostUpdate`.
But I will suggest you calculating the right offset according to the axis
number and maximum width of the axis labels, which I think is not hard to
get if the result is not required to be very accurate.
Regards
On Mon, Feb 22, 2021 at 10:33 PM Jonathan Avila <av...@gmail.com>
wrote:
> Hi Echart Dev Team,
>
> I'm working on a chart that will have a dynamic number of y axis positioned
> to the right. I want to be able to set the right offset for each axis to
> avoid label overlap, but I would like to avoid setting a fixed number for
> the offset to maximize the available space.
>
> My first attempt was to try and use `echarts.registerVisual` function to
> get the ComponentView and then get its width and height with
> `view.group.getBoundingRect()`. Unfortunately, the method will execute
> before the axis view has rendered, so the boundingRect will have width 0
> and height 0. Do you guys have any suggestions on how I could proceed? Is
> there a way that I listen for a render event on an component view or
> perhaps some zRender event that I can try?
>
> Thanks,
>
> Jonathan
>
--
Yi Shen
Apache ECharts(incubating) PMC
Re: getBoundingRect on Axis ComponentView
Posted by Jonathan Avila <av...@gmail.com>.
Hi Yi,
Thanks for the sample. I actually went back to my previous tests and I now
remember the issue I faced with `registerPostUpdate`. Once I have the width
of the axis, I need to update the chart with a new option. Unfortunately,
it doesn't like that even when passing `lazyUpdate: true` and I get the
`Uncaugt `Error: `setOption` should not be called during`. I tried using
`ecModel.mergeOption`, but since it's postUpdate, it won't reflect the
change until the next render.
Any suggestions?
Jonathan
On Wed, Mar 3, 2021 at 1:06 AM Yi Shen <sh...@gmail.com> wrote:
> Hi Jonathan.
>
> `getBoundingRect ` should work properly in `registerPostUpdate`
> because everything has been constructed. I write an example to demo it[1].
> I'm not sure why it won't work for you.
>
> Add `auto` support in offset is helpful in cases like this. Do you mind
> creating an issue on GitHub so we can track it?
>
> [1] https://codesandbox.io/s/cool-jackson-om9cg?file=/src/index.js
>
> Regards
>
> On Mon, Mar 1, 2021 at 10:53 PM Jonathan Avila <av...@gmail.com>
> wrote:
>
>> Yi,
>>
>> Here's a video of what I was trying to achieve. Notice how the right
>> y-axes will adjust to fit the labels when the animation finishes and the
>> `grid.right` also changes.
>>
>>
>> https://drive.google.com/file/d/1ZteuLiBba2qpvkbriRHkMjt388sJgvwG/view?usp=sharing
>>
>> On Mon, Mar 1, 2021 at 8:44 AM Jonathan Avila <av...@gmail.com>
>> wrote:
>>
>>> Hi Yi,
>>>
>>> Thanks for the reply. I had given `registerPostUpdate` a try, but on the
>>> very first rendering, it will still execute before the yAxisView has
>>> rendered and `getBoundingRect` returns width and height of 0. The reason
>>> why I can't easily calculate the offset manually is because our app allows
>>> users to configure the number of axes and the metric used in each axis. In
>>> this "data exploration" mode, the required offset and width of each axis
>>> can change quite a bit based on things like the label formatting and the
>>> axis extent.
>>>
>>> In an ideal world, we'd have some sort of `auto` offset with some small
>>> gap between each axis, but or now, I was able to achieve what I'm looking
>>> for using `chart.on('finished', handler)` + setOption. It's working well
>>> for me, but I have to make sure I use lazyUpdate for setOption when I
>>> calculate the offset of each axis based on the offset of the axis to the
>>> left.
>>>
>>> I'll try and follow with a reply that contains a GIF to show the result
>>> of what I did.
>>>
>>> Thanks
>>>
>>> Jonathan
>>>
>>>
>>> On Mon, Mar 1, 2021 at 4:00 AM Yi Shen <sh...@gmail.com> wrote:
>>>
>>>> Hi Jonathan,
>>>>
>>>> echarts is rendered synchronously after `setOption`. So you can always
>>>> use `view.group.getBoundingRect` to get the bounds after `setOption`.
>>>> Or if you wan't to do it before rendering to canvas. There is a stage
>>>> post update that can be extended by `registerPostUpdate`.
>>>>
>>>> But I will suggest you calculating the right offset according to the
>>>> axis number and maximum width of the axis labels, which I think is not hard
>>>> to get if the result is not required to be very accurate.
>>>>
>>>> Regards
>>>>
>>>> On Mon, Feb 22, 2021 at 10:33 PM Jonathan Avila <
>>>> avilajonathan@gmail.com> wrote:
>>>>
>>>>> Hi Echart Dev Team,
>>>>>
>>>>> I'm working on a chart that will have a dynamic number of y axis
>>>>> positioned
>>>>> to the right. I want to be able to set the right offset for each axis
>>>>> to
>>>>> avoid label overlap, but I would like to avoid setting a fixed number
>>>>> for
>>>>> the offset to maximize the available space.
>>>>>
>>>>> My first attempt was to try and use `echarts.registerVisual` function
>>>>> to
>>>>> get the ComponentView and then get its width and height with
>>>>> `view.group.getBoundingRect()`. Unfortunately, the method will execute
>>>>> before the axis view has rendered, so the boundingRect will have width
>>>>> 0
>>>>> and height 0. Do you guys have any suggestions on how I could proceed?
>>>>> Is
>>>>> there a way that I listen for a render event on an component view or
>>>>> perhaps some zRender event that I can try?
>>>>>
>>>>> Thanks,
>>>>>
>>>>> Jonathan
>>>>>
>>>>
>>>>
>>>> --
>>>> Yi Shen
>>>> Apache ECharts(incubating) PMC
>>>>
>>>
>
> --
> Yi Shen
> Apache ECharts(incubating) PMC
>
Re: getBoundingRect on Axis ComponentView
Posted by Yi Shen <sh...@gmail.com>.
Hi Jonathan.
`getBoundingRect ` should work properly in `registerPostUpdate`
because everything has been constructed. I write an example to demo it[1].
I'm not sure why it won't work for you.
Add `auto` support in offset is helpful in cases like this. Do you mind
creating an issue on GitHub so we can track it?
[1] https://codesandbox.io/s/cool-jackson-om9cg?file=/src/index.js
Regards
On Mon, Mar 1, 2021 at 10:53 PM Jonathan Avila <av...@gmail.com>
wrote:
> Yi,
>
> Here's a video of what I was trying to achieve. Notice how the right
> y-axes will adjust to fit the labels when the animation finishes and the
> `grid.right` also changes.
>
>
> https://drive.google.com/file/d/1ZteuLiBba2qpvkbriRHkMjt388sJgvwG/view?usp=sharing
>
> On Mon, Mar 1, 2021 at 8:44 AM Jonathan Avila <av...@gmail.com>
> wrote:
>
>> Hi Yi,
>>
>> Thanks for the reply. I had given `registerPostUpdate` a try, but on the
>> very first rendering, it will still execute before the yAxisView has
>> rendered and `getBoundingRect` returns width and height of 0. The reason
>> why I can't easily calculate the offset manually is because our app allows
>> users to configure the number of axes and the metric used in each axis. In
>> this "data exploration" mode, the required offset and width of each axis
>> can change quite a bit based on things like the label formatting and the
>> axis extent.
>>
>> In an ideal world, we'd have some sort of `auto` offset with some small
>> gap between each axis, but or now, I was able to achieve what I'm looking
>> for using `chart.on('finished', handler)` + setOption. It's working well
>> for me, but I have to make sure I use lazyUpdate for setOption when I
>> calculate the offset of each axis based on the offset of the axis to the
>> left.
>>
>> I'll try and follow with a reply that contains a GIF to show the result
>> of what I did.
>>
>> Thanks
>>
>> Jonathan
>>
>>
>> On Mon, Mar 1, 2021 at 4:00 AM Yi Shen <sh...@gmail.com> wrote:
>>
>>> Hi Jonathan,
>>>
>>> echarts is rendered synchronously after `setOption`. So you can always
>>> use `view.group.getBoundingRect` to get the bounds after `setOption`.
>>> Or if you wan't to do it before rendering to canvas. There is a stage
>>> post update that can be extended by `registerPostUpdate`.
>>>
>>> But I will suggest you calculating the right offset according to the
>>> axis number and maximum width of the axis labels, which I think is not hard
>>> to get if the result is not required to be very accurate.
>>>
>>> Regards
>>>
>>> On Mon, Feb 22, 2021 at 10:33 PM Jonathan Avila <av...@gmail.com>
>>> wrote:
>>>
>>>> Hi Echart Dev Team,
>>>>
>>>> I'm working on a chart that will have a dynamic number of y axis
>>>> positioned
>>>> to the right. I want to be able to set the right offset for each axis to
>>>> avoid label overlap, but I would like to avoid setting a fixed number
>>>> for
>>>> the offset to maximize the available space.
>>>>
>>>> My first attempt was to try and use `echarts.registerVisual` function to
>>>> get the ComponentView and then get its width and height with
>>>> `view.group.getBoundingRect()`. Unfortunately, the method will execute
>>>> before the axis view has rendered, so the boundingRect will have width 0
>>>> and height 0. Do you guys have any suggestions on how I could proceed?
>>>> Is
>>>> there a way that I listen for a render event on an component view or
>>>> perhaps some zRender event that I can try?
>>>>
>>>> Thanks,
>>>>
>>>> Jonathan
>>>>
>>>
>>>
>>> --
>>> Yi Shen
>>> Apache ECharts(incubating) PMC
>>>
>>
--
Yi Shen
Apache ECharts(incubating) PMC
Re: getBoundingRect on Axis ComponentView
Posted by Jonathan Avila <av...@gmail.com>.
Yi,
Here's a video of what I was trying to achieve. Notice how the right y-axes
will adjust to fit the labels when the animation finishes and the
`grid.right` also changes.
https://drive.google.com/file/d/1ZteuLiBba2qpvkbriRHkMjt388sJgvwG/view?usp=sharing
On Mon, Mar 1, 2021 at 8:44 AM Jonathan Avila <av...@gmail.com>
wrote:
> Hi Yi,
>
> Thanks for the reply. I had given `registerPostUpdate` a try, but on the
> very first rendering, it will still execute before the yAxisView has
> rendered and `getBoundingRect` returns width and height of 0. The reason
> why I can't easily calculate the offset manually is because our app allows
> users to configure the number of axes and the metric used in each axis. In
> this "data exploration" mode, the required offset and width of each axis
> can change quite a bit based on things like the label formatting and the
> axis extent.
>
> In an ideal world, we'd have some sort of `auto` offset with some small
> gap between each axis, but or now, I was able to achieve what I'm looking
> for using `chart.on('finished', handler)` + setOption. It's working well
> for me, but I have to make sure I use lazyUpdate for setOption when I
> calculate the offset of each axis based on the offset of the axis to the
> left.
>
> I'll try and follow with a reply that contains a GIF to show the result of
> what I did.
>
> Thanks
>
> Jonathan
>
>
> On Mon, Mar 1, 2021 at 4:00 AM Yi Shen <sh...@gmail.com> wrote:
>
>> Hi Jonathan,
>>
>> echarts is rendered synchronously after `setOption`. So you can always
>> use `view.group.getBoundingRect` to get the bounds after `setOption`.
>> Or if you wan't to do it before rendering to canvas. There is a stage
>> post update that can be extended by `registerPostUpdate`.
>>
>> But I will suggest you calculating the right offset according to the axis
>> number and maximum width of the axis labels, which I think is not hard to
>> get if the result is not required to be very accurate.
>>
>> Regards
>>
>> On Mon, Feb 22, 2021 at 10:33 PM Jonathan Avila <av...@gmail.com>
>> wrote:
>>
>>> Hi Echart Dev Team,
>>>
>>> I'm working on a chart that will have a dynamic number of y axis
>>> positioned
>>> to the right. I want to be able to set the right offset for each axis to
>>> avoid label overlap, but I would like to avoid setting a fixed number for
>>> the offset to maximize the available space.
>>>
>>> My first attempt was to try and use `echarts.registerVisual` function to
>>> get the ComponentView and then get its width and height with
>>> `view.group.getBoundingRect()`. Unfortunately, the method will execute
>>> before the axis view has rendered, so the boundingRect will have width 0
>>> and height 0. Do you guys have any suggestions on how I could proceed? Is
>>> there a way that I listen for a render event on an component view or
>>> perhaps some zRender event that I can try?
>>>
>>> Thanks,
>>>
>>> Jonathan
>>>
>>
>>
>> --
>> Yi Shen
>> Apache ECharts(incubating) PMC
>>
>
Re: getBoundingRect on Axis ComponentView
Posted by Jonathan Avila <av...@gmail.com>.
Hi Yi,
Thanks for the reply. I had given `registerPostUpdate` a try, but on the
very first rendering, it will still execute before the yAxisView has
rendered and `getBoundingRect` returns width and height of 0. The reason
why I can't easily calculate the offset manually is because our app allows
users to configure the number of axes and the metric used in each axis. In
this "data exploration" mode, the required offset and width of each axis
can change quite a bit based on things like the label formatting and the
axis extent.
In an ideal world, we'd have some sort of `auto` offset with some small gap
between each axis, but or now, I was able to achieve what I'm looking for
using `chart.on('finished', handler)` + setOption. It's working well for
me, but I have to make sure I use lazyUpdate for setOption when I calculate
the offset of each axis based on the offset of the axis to the left.
I'll try and follow with a reply that contains a GIF to show the result of
what I did.
Thanks
Jonathan
On Mon, Mar 1, 2021 at 4:00 AM Yi Shen <sh...@gmail.com> wrote:
> Hi Jonathan,
>
> echarts is rendered synchronously after `setOption`. So you can always use
> `view.group.getBoundingRect` to get the bounds after `setOption`.
> Or if you wan't to do it before rendering to canvas. There is a stage post
> update that can be extended by `registerPostUpdate`.
>
> But I will suggest you calculating the right offset according to the axis
> number and maximum width of the axis labels, which I think is not hard to
> get if the result is not required to be very accurate.
>
> Regards
>
> On Mon, Feb 22, 2021 at 10:33 PM Jonathan Avila <av...@gmail.com>
> wrote:
>
>> Hi Echart Dev Team,
>>
>> I'm working on a chart that will have a dynamic number of y axis
>> positioned
>> to the right. I want to be able to set the right offset for each axis to
>> avoid label overlap, but I would like to avoid setting a fixed number for
>> the offset to maximize the available space.
>>
>> My first attempt was to try and use `echarts.registerVisual` function to
>> get the ComponentView and then get its width and height with
>> `view.group.getBoundingRect()`. Unfortunately, the method will execute
>> before the axis view has rendered, so the boundingRect will have width 0
>> and height 0. Do you guys have any suggestions on how I could proceed? Is
>> there a way that I listen for a render event on an component view or
>> perhaps some zRender event that I can try?
>>
>> Thanks,
>>
>> Jonathan
>>
>
>
> --
> Yi Shen
> Apache ECharts(incubating) PMC
>