You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "yay (via GitHub)" <gi...@apache.org> on 2023/06/14 15:34:31 UTC
[GitHub] [echarts] yay opened a new issue, #18523: [Feature] Provide an API to draw/define a custom emphasis
yay opened a new issue, #18523:
URL: https://github.com/apache/echarts/issues/18523
### What problem does this feature solve?
Hi,
We'd like to migrate from [visx](https://airbnb.io/visx/) to eCharts ,but need to support the following emphasis style in our charts:
https://imgur.com/a/r5Ty6af
https://imgur.com/a/Owvnb8g
It doesn't seem like it's possible to achieve something like that with the latest version of eCharts. Happy to be wrong on that :) Would you consider adding an API that either allows defining a shape to draw around a data point when it's hovered or one that allows to paint a custom shape (via a provided drawing context or by returning the shape in SVG path syntax, for example)?
### What does the proposed API look like?
```
emphasis: {
formatter: (point: RenderedDataPoint, ctx: CanvasLikeRenderingContext2D) {
const { x, y, width, height, radius, rawValue } = RenderedDataPoint;
return 'SVG path syntax string';
},
style: {
fill: 'none',
stroke: 'white',
lineWidth: 1
}
}
```
Where the `RenderedDataPoint` is the data point in screen coordinates, represented by either center/radius or a bounding box rectangle:
```
type RenderedDataPoint = {
x: number; // x,y is the center of the data point in case of line/area series, the top-left corner in case of bar/boxplot series
y: number;
width?: number; // for bar/boxplot series
height?: number; // for bar/boxplot series
radius?: number; // for line/area series markers, for example
rawValue: any; // a reference to the raw data that is represented by this rendered data point
}
```
And where `ctx` is a context similar to `CanvasRenderingContext2D`, but not necessarily a native one. Under the hood you can call the native context commands or turn them into SVG, depending on the rendering backend used.
Alternatively, one can return a string in SVG path syntax from `formatter` function, instead of calling `ctx.lineTo`, `ctx.bezierCurveTo` and the like.
--
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.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] yay commented on issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "yay (via GitHub)" <gi...@apache.org>.
yay commented on issue #18523:
URL: https://github.com/apache/echarts/issues/18523#issuecomment-1512420663
Thank you! I will give it a try.
--
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] yay commented on issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "yay (via GitHub)" <gi...@apache.org>.
yay commented on issue #18523:
URL: https://github.com/apache/echarts/issues/18523#issuecomment-1591490166
Reopening as we need to show a custom icon, if possible.
The `graphic` docs say the only supported types are:
`image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group`
https://echarts.apache.org/en/option.html#graphic
For custom icons a `path` graphic type that takes in a path definition in SVG path syntax would be very helpful:
https://www.w3.org/TR/SVG/paths.html#PathData
@Ovilia Do you know if there is something like this already?
--
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] yay closed issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "yay (via GitHub)" <gi...@apache.org>.
yay closed issue #18523: [Feature] Provide an API to draw/define a custom emphasis
URL: https://github.com/apache/echarts/issues/18523
--
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] Ovilia commented on issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia commented on issue #18523:
URL: https://github.com/apache/echarts/issues/18523#issuecomment-1512356485
Hi. This is possible but you need to write a little code. The basic idea is to listen to the mouse event and use `setOption` to draw or hide the shape.
```ts
chart.on('mouseover', params => {
option.graphic = {
elements: [{...}] // draw the rectangle based on the information from `params`
};
chart.setOption(option);
});
chart.on('mouseout', params => {
option.graphic = {
elements: [] // remove the rectangle
};
chart.setOption(option, true); // using "not merge" so that the graphic elements will be removed
});
```
--
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] yay closed issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "yay (via GitHub)" <gi...@apache.org>.
yay closed issue #18523: [Feature] Provide an API to draw/define a custom emphasis
URL: https://github.com/apache/echarts/issues/18523
--
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] yay commented on issue #18523: [Feature] Provide an API to draw/define a custom emphasis
Posted by "yay (via GitHub)" <gi...@apache.org>.
yay commented on issue #18523:
URL: https://github.com/apache/echarts/issues/18523#issuecomment-1713552695
Never mind, I found that I can use a background image in text graphics, including chart title.
--
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