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 2022/07/25 11:01:42 UTC
[GitHub] [echarts] NourSaleh91 opened a new issue, #17424: click event is not working
NourSaleh91 opened a new issue, #17424:
URL: https://github.com/apache/echarts/issues/17424
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
1- built regular line chart as the following:
`import React, { useLayoutEffect } from "react";
import styled from "@emotion/styled";
import * as echarts from "echarts";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-regular-svg-icons";
import ReactEcharts from "echarts-for-react";
const Container = styled.div`
position: relative;
height: 100%;
min-height: 187px;
`;
const Content = styled.div`
position: absolute;
//width: 410px;
//height: 200%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid rgba(0, 83, 229, 0.12);
border-radius: 8px;
`;
const Title = styled.div`
display: flex;
flex-direction: row;
gap: 4px;
margin-top: 18.5px;
margin-left: 16px;
`;
const TitleText = styled.div`
font-family: "Open Sans";
font-style: normal;
font-size: 10px;
line-height: 17px;
align: left;
letter-spacing: 0.4px;
color: #6877AE;
`;
const StyledIcon = styled(FontAwesomeIcon)({
fontFamily: "Font Awesome 6 Pro",
fontSize: "12px",
color: "#6877AE",
lineHeight: "12px",
marginTop: "2px"
});
const ChartData = [
{ value: 70, date: "10-Jan-2019" },
{ value: 71, date: "10-Feb-2019" },
{ value: 72, date: "11-Feb-2019" },
{ value: 68, date: "10-Mar-2019" },
{ value: 67, date: "11-Mar-2019" },
{ value: 67, date: "11-Mar-2019" },
{ value: 72, date: "10-Apr-2019" },
{ value: 76, date: "10-May-2019" },
{ value: 78, date: "10-Jun-2019" },
{ value: 80, date: "10-Jul-2019" },
{ value: 78, date: "10-Aug-2019" },
{ value: 80, date: "10-Sep-2019" },
{ value: 77, date: "10-Oct-2019" },
{ value: 74, date: "10-Nov-2019" },
{ value: 72, date: "10-Dec-2019" }
];
export const LineChart = () => {
useLayoutEffect(() => {
const div = document.getElementById("apache_echarts_line_chart") as HTMLDivElement;
if (!div) {
return;
}
//TODO: Understand the difference between using canvas vs. svg
const chart = echarts.init(div, undefined, { renderer: "canvas" });
const parentDiv = div.parentElement;
if (!parentDiv) {
return;
}
const getDates = () : string[] => {
const dates: Array<string> = [];
ChartData.forEach(item => {
dates.push(item.date);
});
return dates;
};
const getValues = () => {
const values: Array<number> = [];
ChartData.forEach(item => {
values.push(item.value);
});
return values;
};
chart.setOption({
grid: {
left: 55,
top: 70,
right: 21,
bottom: 35
},
tooltip: {
trigger: "axis",
showDelay: 20,
triggerOn: "mousemove"
},
xAxis: {
type: "category",
data: getDates(),
boundaryGap: false,
axisLabel: {
formatter: function (value: any) {
const date = new Date(value);
return date.toDateString().split(' ')[1];
}
}
},
yAxis: {
type: "value",
name: "Views",
nameLocation: "middle",
nameGap: 25,
nameTextStyle: {
color: "#000000",
align: "left",
fontWeight: 400,
fontSize: 8,
lineHeight: 21.28,
//padding: [0, 0, 0, -10]
},
splitLine: {
show: false
}
},
series: [
{
name: "views",
data: getValues(),
type: "line",
smooth: true,
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
{
offset: 0,
color: 'rgba(0, 65, 205, 0.21)'
},
{
offset: 1,
color: 'rgba(0, 65, 205, 0)'
}
]
)
}
}
]
});
const resizeObserver = new ResizeObserver(() => chart.resize());
resizeObserver.observe(div.parentElement);
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
return () => {
resizeObserver.disconnect();
//TODO: Understand when "dispose" is needed
chart.dispose();
};
}, [ChartData]);
return (
<Container>
<Title>
<StyledIcon icon={faEye} />
<TitleText>
Views over time
</TitleText>
</Title>
<Content id={"apache_echarts_line_chart"} />
</Container>
);
};
`
2- as you can see i'm trying to register the following event:
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
but i can't see any output in the console, please advice
### Current Behavior
can't see any output in the console from the event:
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
Please advice
### Expected Behavior
see the console log when clicking on the chart
### Environment
```markdown
- OS: Win 11
- Browser: chrome
```
### Any additional comments?
_No response_
--
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] echarts-bot[bot] closed issue #17424: [Bug]
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] closed issue #17424: [Bug]
URL: https://github.com/apache/echarts/issues/17424
--
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 #17424: click event is not working
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17424:
URL: https://github.com/apache/echarts/issues/17424#issuecomment-1195101663
The click event only works on data items, which is the bars in bar series, pie pieces in pie charts, points in scatter charts and etc. If you need further help, please simplify your code.
--
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 #17424: [Bug]
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17424:
URL: https://github.com/apache/echarts/issues/17424#issuecomment-1193901487
I'm sorry to close this issue for it lacks the necessary title. Please provide **a _descriptive_ and as _concise_ as possible title to describe your problems or requests** and then the maintainers or I will reopen this issue.
Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.
A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.
Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.
--
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] NourSaleh91 commented on issue #17424: click event is not working
Posted by GitBox <gi...@apache.org>.
NourSaleh91 commented on issue #17424:
URL: https://github.com/apache/echarts/issues/17424#issuecomment-1195207919
@Ovilia thanks for the fast response, it would be much appreciated if you could guide me to build these requirements:
I need to have different behavior on hover and click events, on hover the tooltip will be displayed as expected until we move the mouse to the next data point/ item
on click event, I need to fix the tooltip to be displayed all the time until we click on another data point/item (and then the tooltip for the new clicked item will be displayed) or click outside the chart
is that possible and what is the best way to do it?
requirements:
* hover - tooltip will have a delay of 1 sec
* click - tooltip stays when click. when clicking outside or on a different widget the tooltip is closed
--
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 #17424: click event is not working
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17424:
URL: https://github.com/apache/echarts/issues/17424#issuecomment-1196253703
Please provide a minimum demo first to let others understand what you are working with.
--
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 #17424: click event is not working
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17424:
URL: https://github.com/apache/echarts/issues/17424#issuecomment-1195101848
@NourSaleh91 Please provide a demo for the issue either with [Official Editor](https://echarts.apache.org/examples/editor.html), [CodePen](https://codepen.io/Ovilia/pen/dyYWXWM), [CodeSandbox](https://codesandbox.io/s/echarts-basic-example-template-mpfz1s) or [JSFiddle](https://jsfiddle.net/plainheart/e46ozpqj/7/).
--
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