You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/02/12 19:41:23 UTC
[GitHub] [echarts] qortex opened a new issue #14266: Time Axis is display can overlap in v5
qortex opened a new issue #14266:
URL: https://github.com/apache/echarts/issues/14266
### Version
5.0.2
### Reproduction link
[https://echarts.apache.org/examples/en/editor.html?c=dynamic-data2](https://echarts.apache.org/examples/en/editor.html?c=dynamic-data2)
### Steps to reproduce
Go to official example and reduce the window size. Then x axis labels will overlap and look crappy.
### What is expected?
The ticks should gently disappear to let only a few appear.
### What is actually happening?
Labels overlap and look crappy.
Example on my app:

Example in the official example:

---
Worked well in v4 (see https://echarts.apache.org/v4/examples/en/editor.html?c=dynamic-data2)
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-796483052
I think `interval` breaks in the new time axis. We will fix it in the later versions.
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-899211445
@svedova Sorry for the late reply.
Usually, `prepareLayoutList` and `hideOverlap` are called when all labels are created and prepared, prepared means all properties like transform, font are set so the method can get the correct oriented bounding rect. For axis, I think it can be https://github.com/apache/echarts/blob/master/src/component/axis/CartesianAxisView.ts#L102
Some properties of `prepareLayoutList` are optional. The type is a bit misleading, it should be:
```ts
interface LabelLayoutListPrepareInput {
label: ZRText
labelLine?: Polyline
computedLayoutOption?: LabelLayoutOption
priority: number
defaultAttr: {
ignore: boolean
labelGuideIgnore?: boolean
}
}
```
`defaultAttr.ignore` can use `label.ignore` here.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-893982506
@svedova Hi, Thanks for helping fix it. There is a helper function that can hide the overlapped labels.
https://github.com/apache/echarts/blob/master/src/label/labelLayoutHelper.ts#L289
The `labelList` parameters can be prepared by the helper function `prepareLayoutList ` in the same file. What you need is to give a list with `label` and `priority` in each item. For better display. The priority of each label should be:
year > month > day > hour > minutes > second > millesecond
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-778411252
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe our [mailing list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-893982506
@svedova Hi, Thanks for helping fix it. There is a helper function that can hide the overlapped labels.
https://github.com/apache/echarts/blob/master/src/label/labelLayoutHelper.ts#L289
The `labelList` parameters can be prepared by the helper function `prepareLayoutList ` in the same file. What you need is to give a list with `label` and `priority` in each item. For better display. The priority of each label should be:
year > month > day > hour > minutes > second > millesecond
Feel free to ask in this thread if you have any more questions:)
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] qortex commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
qortex commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-778427613
It looks like setting `splitNumber` to 5 is a workaround as far as I can tell (even though it's supposed to be the default according to the doc?)
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] tmtron edited a comment on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
tmtron edited a comment on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-795685550
Unfortunately the workaround (setting [xAxis.splitNumber](https://echarts.apache.org/en/option.html#xAxis.splitNumber) to 5) does not work for me: see this [example](https://jsfiddle.net/tmtron/2apkvgwy/12/) echarts versin 5.2.0
Quote from the `splitNumber` docs:
>Note that this number serves **only as a recommendation**, and the true segments may be adjusted based on readability.
So I tried [xAxis.interval](https://echarts.apache.org/en/option.html#xAxis.interval):
>**Compulsively** set segmentation interval for axis.
As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings.
But this does also not work
Also [xAxis.axisLabel.interval](https://echarts.apache.org/en/option.html#xAxis.axisLabel.interval) had no effect.
Any idea why this is not working in my example?
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] tmtron commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
tmtron commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-795685550
Unfortunately the workaround (setting [xAxis.splitNumber](https://echarts.apache.org/en/option.html#xAxis.splitNumber) to 5) does not work for me: see this [example](https://jsfiddle.net/tmtron/2apkvgwy/10/)
Quote from the `splitNumber` docs:
>Note that this number serves **only as a recommendation**, and the true segments may be adjusted based on readability.
So I tried [xAxis.interval](https://echarts.apache.org/en/option.html#xAxis.interval):
>**Compulsively** set segmentation interval for axis.
As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings.
But this does also not work
Also [xAxis.axisLabel.interval](https://echarts.apache.org/en/option.html#xAxis.axisLabel.interval) had no effect.
Any idea why this is not working in my example?
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-899211445
@svedova Sorry for the late reply.
Usually, `prepareLayoutList` and `hideOverlap` are called when all labels are created and prepared, prepared means all properties like transform, font are set so the method can get the correct oriented bounding rect. For axis, I think it can be https://github.com/apache/echarts/blob/master/src/component/axis/CartesianAxisView.ts#L102
Some properties of `LabelLayoutListPrepareInput` are optional. The type is a bit misleading, it should be:
```ts
interface LabelLayoutListPrepareInput {
label: ZRText
labelLine?: Polyline
computedLayoutOption?: LabelLayoutOption
priority: number
defaultAttr: {
ignore: boolean
labelGuideIgnore?: boolean
}
}
```
`defaultAttr.ignore` can use `label.ignore` here.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] svedova commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
svedova commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-892664706
We'd like to use the upgraded version at GitLab however this bug is a blocker for us. I'd like to help and submit a PR. Is there any link to any discussion @pissang, where I could have more insight on where to look?
Seems like this happens mostly with the Time based labels and it seems like the day/month are not evenly spaced:

If you check here, the left space between `July` and `29` is not the same as `July` and `8` in the X axis. Can this be related?
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-899211445
@svedova Sorry for the late reply.
Usually, `prepareLayoutList` and `hideOverlap` are called when all labels are created and prepared, prepared means all properties like transform, font are set so the method can get the correct oriented bounding rect. For axis, I think it can be https://github.com/apache/echarts/blob/master/src/component/axis/CartesianAxisView.ts#L102
Some properties of `prepareLayoutList` are optional. The type has some issue here, it should be:
```ts
interface LabelLayoutListPrepareInput {
label: ZRText
labelLine?: Polyline
computedLayoutOption?: LabelLayoutOption
priority: number
defaultAttr: {
ignore: boolean
labelGuideIgnore?: boolean
}
}
```
`defaultAttr.ignore` can use `label.ignore` here.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] szilard-dobai commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
szilard-dobai commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-862165605
Any news on this bugfix? :)
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] svedova commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
svedova commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-894654668
@pissang thanks for the help!
At which state am I supposed to use the `prepareLayoutList` function?
Initially I thought I would alter the `Time.ts` file but as far as I can tell, all it does is to return a list of string labels when `getLabel` and `getFormattedLabel` is called. When I trace the call stack, it seems like `AxisBuilder.ts` creates a list of `ZRText`s here: https://github.com/apache/echarts/blob/master/src/component/axis/AxisBuilder.ts#L342
Is it a good place to use the `prepareLayoutList` and `hideOverlap` helpers?
Another question, `prepareLayoutList` expects a few more properties than `label` and `priority` (ref: https://github.com/apache/echarts/blob/master/src/label/labelLayoutHelper.ts#L25). How do I populate the other properties?
Unfortunately there are not many examples in the codebase using these two helpers (only the `LabelManager` seems to use them), so a little help would be highly appreciated here 🙏
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-796483052
I think interval breaks in the new time axis. We will fix it in the later versions.
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang closed issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
pissang closed issue #14266:
URL: https://github.com/apache/echarts/issues/14266
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-796483380
This issue is labeled with `priority: high`, which means it's a frequently asked problem and we will fix it ASAP.
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] svedova commented on issue #14266: Time Axis is display can overlap in v5
Posted by GitBox <gi...@apache.org>.
svedova commented on issue #14266:
URL: https://github.com/apache/echarts/issues/14266#issuecomment-892664706
We'd like to use the upgraded version at GitLab however this bug is a blocker for us. I'd like to help and submit a PR. Is there any link to any discussion @pissang, where I could have more insight on where to look?
Seems like this happens mostly with the Time based labels and it seems like the day/month are not evenly spaced:

If you check here, the left space between `July` and `29` is not the same as `July` and `8` in the X axis. Can this be related?
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org