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 12:12:10 UTC
[GitHub] [echarts] efj5n8 opened a new issue, #17425: Tooltip/hover to display information will not display if element is not set to full width[Bug]
efj5n8 opened a new issue, #17425:
URL: https://github.com/apache/echarts/issues/17425
### Version
5.3.3
### Link to Minimal Reproduction
https://codesandbox.io/embed/basic-line-chart-forked-8xntie?fontsize=14&hidenavigation=1&theme=dark
### Steps to Reproduce
`<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div
class="shot"
id="shot_plot"
style="width: 900px; height: 900px; font-size: 0;"
>
off
</div>
<script>
var myChart = echarts.init(document.getElementById("shot_plot"));
var data = [
[-0.625, 0.04167], //result: 10
[-3.083, -8.04167], //result: 2
[0.1667, -7.5], //result: 3
[2.2083, 6.583], //result 4
[0.25, -1.54167] //result 9
];
geo_data = [[0.125, 2.3]];
var store = {
res_coord: ["test", "blah", "becky", "sauerbrunn", "boo"],
geo_cntr: ["homer simpson"]
};
var callback = (args) => {
var data = store[args.seriesId][args.dataIndex];
return (
args.marker +
" " +
args.value[1] +
"<br />" +
args.seriesId +
": " +
data
);
};
var option = {
graphic: {
type: "image",
left: "center",
right: "center",
bottom: "center",
top: "center",
//bounding: 'all',
style: {
image: "./img/Target.png",
width: 800,
height: 800
}
},
xAxis: [
{
min: -11,
max: 11,
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
yAxis: [
{
min: -11,
max: 11,
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
dataZoom: [
{
type: "inside"
}
],
legend: {
orient: "horizontal",
top: 25,
right: 50,
data: ["Shot Results", "Geometric Center"]
},
title: {
text: "Shot Results",
top: 0,
right: "center"
},
tooltip: {
trigger: "item",
formatter: callback
},
series: [
{
id: "res_coord",
symbolSize: 12,
data: data,
type: "scatter",
color: "#FC0707",
name: "Shot Results"
},
{
id: "geo_cntr",
symbolSize: 10,
data: geo_data,
type: "scatter",
color: "#02FCF5",
name: "Geometric Center"
}
],
toolbox: {
feature: {
saveAsImage: {}
}
}
}; //option close bracket
myChart.setOption(option);
myChart.resize({
width: 1000,
height: 950
});
elm = document.querySelector("#shot_plot > div > canvas");
elm.style.width = "70%";
elm.style.height = "auto";
</script>
</body>
</html>
`
### Current Behavior
The display box will not appear with: elm.style.width = "70%"; (line 150). This line is used to help maintain the aspect ratio of the background graphic. If you use: elm.style.width = "100%"; the display box with additional information (using the tooltip and callback) will appear.
### Expected Behavior
The display box with additional information should appear.
### Environment
```markdown
- OS: Windows 10
- Browser: Chrome
- Framework:
```
### 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