You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "wdmhouston (via GitHub)" <gi...@apache.org> on 2023/04/21 14:15:22 UTC
[GitHub] [echarts] wdmhouston opened a new issue, #18548: [Bug] Grid refresh with wrong display
wdmhouston opened a new issue, #18548:
URL: https://github.com/apache/echarts/issues/18548
### Version
5.4.2
### Link to Minimal Reproduction
no, example page provided
### Steps to Reproduce
1. Create chart with the following script (modified from example),
```
<div id="main"></div>
<script>
//Const data for grid refresh calculation
const gs_min = 0.0;
const gs_max = 4000;
const gs = [
{ name: 'range 0-500', end: 500.0, start: 0.0, color: '#F5EC09' },
{ name: 'range 500-1000', end: 1000.0, start: 500.0, color: '#4CC6E0' },
{ name: 'range 100-1500', end: 1500.0, start: 1000.0, color: '#9DC2A6' },
{ name: 'range 1500-2000', end: 2000.0, start: 1500.0, color: '#E44253' },
{ name: 'range 2000-2500', end: 2500.0, start: 2000.0, color: '#F5EC09' },
{ name: 'range 2500-3000', end: 3000.0, start: 2500.0, color: '#4CC6E0' },
{ name: 'range 3000-3500', end: 3500.0, start: 3000.0, color: '#9DC2A6' },
{ name: 'range 3500-4000', end: 4000.0, start: 3500.0, color: '#E44253' },
];
//Dynamic series for grid
var series_gs = [];
//Refresh sereis_gs array from selected range percetage
function create_series_gs(gs_start_percent, gs_end_percent) {
console.log("create_series_gs called");
series_gs = [];
if (gs_start_percent < 0 || gs_end_percent > 100) {
return; //continue
}
gs_start_value = gs_start_percent / 100.0 * (gs_max - gs_min) + gs_min;
gs_end_value = gs_end_percent / 100.0 * (gs_max - gs_min) + gs_min;
console.log(gs_start_value, gs_end_value);
$.each(gs, function (index, v) {
if (v.end < gs_start_value || v.start > gs_end_value) {
return;
}
var current_start = v.start > gs_start_value ? v.start:gs_start_value;
var current_end = v.end < gs_end_value ? v.end : gs_end_value;
series_gs.push(
{
data: [{
name: v.name,
value: 1
}],
tooltip: {
show: false
},
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 0],
textStyle: {
color: '#000'
},
rotate: 0
},
type: 'bar',
barGap: 0,
barWidth: (current_end - current_start) / (gs_end_value - gs_start_value) * 100.0 + '%',
itemStyle: {
normal: {
color: v.color,
borderColor: '#000',
borderWidth: 0,
}
},
xAxisIndex: 1,
yAxisIndex: 1
});
});
console.log("series_gs:");
console.log(series_gs);
}
//User data for demo
var data1 = [];
var data2 = [];
var data3 = [];
var names = [
'line1',
'line2',
'line3',
];
var random = function (max) {
return (Math.random() * max).toFixed(3);
}
for (var i = 0; i <= 40; i++) {
data1.push([i * 100, 1 + random(5), random(2)]);
data2.push([i * 100, 2 + random(10), random(2)]);
data3.push([i * 100, 3 + random(10), random(2)]);
}
var series_data = [
{
name: names[0],
type: 'line',
label: {
emphasis: {
show: true
}
},
symbol: 'diamond',
symbolSize: function (val) {
return val[2] * 10;
},
data: data1
},
{
name: names[1],
type: 'line',
emphasis: {
scale: 3,
label: {
show: true,
position: 'top',
formatter: function (params) {
return params.value;
}
}
},
symbolSize: function (val) {
return val[2] * 10;
},
itemStyle: {
color: function (params) {
return 'rgba(30, 70, 50, ' + (params.value ? params.value[2] : 0) + ')';
}
},
data: data2
},
{
name: names[2],
type: 'line',
label: {
show: true
},
symbolSize: function (val) {
return val[2] * 10;
},
data: data3
}];
//Create option from sereis_gs and sereis_data
function create_option() {
return {
title: {
text: 'Grid Refresh Issue',
left: 'center',
top: 0
},
animation: false,
aria: {
show: true
},
legend: {
data: names.slice(),
top: 10,
right: 30,
width: 0,
backgroundColor: 'rgba(0,50,50,0.2)',
orient: 'vertical',
},
toolbox: {
left: 'left',
feature: {
dataView: {},
saveAsImage: {},
dataZoom: {}
},
orient: 'vertical',
},
tooltip: {
trigger: 'item',
position: 'top',
borderWidth: 4
},
xAxis: [
{
type: 'value',
splitLine: {
show: false
},
min: 0.0,
max: 4000,
splitNumber: 23,
inverse: false,
zlevel: 5,
},
{
type: 'category',
gridIndex: 1,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
zlevel: 4,
},
],
yAxis: [
{
type: 'value',
gridIndex: 0,
splitLine: {
show: true
},
},
{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
grid: [
{
top: 75,
bottom: 110
},
{
height: 30,
bottom: 50
},
],
series: [...series_gs, ...series_data],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
height: 40,
bottom: 5
}],
};
}
var gschart;
require([
'echarts'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
gschart = chart;
create_series_gs(0, 100);
chart.setOption(create_option());
//datazoom event, handle chart option reset
chart.on('datazoom', function (evt) {
console.log('current evt:');
console.log(evt);
//recalculate sereis data for grid
create_series_gs(evt.start, evt.end);
chart.setOption(create_option());
console.log('current option:');
console.log(chart.getOption());
console.log('current series_gs');
console.log(series_gs);
});
});
</script>
```
3. Run script and it renders grid layout correctly.
### Current Behavior
When Zoom in, series data form grid are recalculated, but the grid part is rendered in a wrong way(some unexpected grid series show up).
Given grid series have all correct data with correct barWidth:
### Expected Behavior
It is expected to render "grid series with correct barwidth" when zoom-in.
### Environment
```markdown
- OS: Windows 11
- Browser: Chrome
- Framework: Javascript
```
### 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] wdmhouston commented on issue #18548: [Bug] Grid refresh with wrong display
Posted by "wdmhouston (via GitHub)" <gi...@apache.org>.
wdmhouston commented on issue #18548:
URL: https://github.com/apache/echarts/issues/18548#issuecomment-1518197657
I also tried to add "chart.clear();" before "chart.setOption(create_option());", but it didn't work.
--
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
Re: [I] [Bug] Grid refresh with wrong display [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #18548:
URL: https://github.com/apache/echarts/issues/18548#issuecomment-2819504349
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.
--
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
Re: [I] [Bug] Grid refresh with wrong display [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] closed issue #18548: [Bug] Grid refresh with wrong display
URL: https://github.com/apache/echarts/issues/18548
--
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] helgasoft commented on issue #18548: [Bug] Grid refresh with wrong display
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18548:
URL: https://github.com/apache/echarts/issues/18548#issuecomment-1518764486
Seems like an attempt to build a custom X-axis...
Problem is in _setOption_: out-of-scope bars are not deleted, hence the remnant stripes at the end.
Here is a simple X-axis replacement - [Demo Code](https://echarts.apache.org/examples/en/editor.html?code=PTCqGcFMCcAIBMCGAXRsBmB7O9IFtMAoAN0RxUQEZYBeWAbQF0BuEshCgJloZbfNQBmHk1ak4AO0R5I4EQHIANgEsJkSvIA0sJasictOlWsHy-_WNEQT4mPD3QBXCQGNkyzBNgAKPIgAeAJSwAN6EsJaQyI7QXt4AsigAFgB0VjZ23sEAVLB-QSnImABiyv6Q8N6CgawAvqxYcN7isMo8AAzMrbAAPHQALJ2tANTDwWERSKiUKQAOjuBJ3vRtuZTt7drUw5bWtnjeAKyB2un73pyBjDXhHKiccwtLK7BrG9rcO2eZ6ye7GQdLtdWJMKIJHotlqtYOtNrBhF89j92n9voCrjdaoQLFBoMpZAB9KZoOj0W4TCKwKQyABcVOksno7UYmluEWQAE9ZpA6bo1Fo2bBFIgAEaQRR0imU2D4WZJRDgZTgSWC6WLTAAdzpyGgjkgqtgWOltVZao5eBFmAlOngymknngArNFqtAGVlAAvHkYZxuDxxUiKcYG6BRGJeQP0TiMV4wzqCk2C4l04mUW6JiJS-m07OMygswWc7m84yQJ2U2XyxXK0IG8AuRCKb2CU3SoWi8UqtuU9Va2A6vWt7uzTCK9yeXlFWbl7uNPzIZAwOlOVzjuKzMjScDB7vS0PRWKwDdWPDgFKBvUg3dGts3iIZnvmy2Kd1e5e-tc-QM7tv78OwSNo1jdYr3vIdWkXPBXU5JsuzbFwrWwd9V39Hxjy3H9uz_Q95GgABzEVECqOEAHY4UOOF5FgHZvHQ09z0bPVYAAfiPTd6IvSAoxjOkUWonRAnkUDKTvQ1wOTO5EE4dNWyzalvXk8BuPAotvT5MtwOFMVrSzCJe21XV9WNcDwCfN1PW9Fc_U8L9G0wylsIjRtuOA-N
jKTCgUzBdNCHMTBZk_OgKXcZBYNraVF38ZBeQAcTxeBYAAJUgdBQ0WWAAElwHAPUZyFFLop0FxIAkRdoDyqdeJk25rGUed_WXRsoFbMg7TgvSkk1Ay9WqiImzwkr4HayS6UUlJwBUYqshU_y6XWcC8TwpJCsETZBQ1ZR4GQJJePAwiXAAazw6BMGceAAGFEOgXl8MI7xNgozRHvaFJLjy7B8VK3liBgdwG0UeRev7TArUtfxhqbdBCqUAq8vQSAUBib1dMkgA1fE-xCB81UQH6AEFwAyvwBslbHKWJAAtEG8FJhNwI-kroZ-6A_sbQGwNuIorXcWZhp1ZQ8IG66dGUSC8pHMcGp0Kc8staBcGgAB1Tbtrpfogf8PH_CVOkyWlFHVO-xiNLrWYVGQAAZPRhrVTq-3QJqjNvcC9LN0WADlHAtJdYE4FsDVUZmoEaxRmoNAIlQtjsdKSTbIAAeWZ4Vef7QyyYiD0mx-61DjpwUUYl0WpfkS0FzsQxMHQdAoGizhOBdkaGAozZYRb5vNE4DZNk4dvVveQR28GDYC27CPwCttRJVgA0Ik8CmYEwEPmun3dYH0jBHYb9PYDHqPtKnmed5UPCJBpGGocMDd4FtCQ8N1uEH4-aMt4bseABVlEOqfS2gjkwpCDaW0drwlqNvTOkBs5qwTLcEesAORax1gwfOBpDY6E4nlCIx1NoZRsJAcGsA1rdnAG7S21twq7nXgOJ2xo84RFgVgoaSD9YoNmrAEihwG6lyKDTGE6xaGUhRkkSAAtlp0lWpwzAZceEUWgXQ1suJ8Q1noLAFIqiFGEmJLAym1NdbIO7Kg-QqhFS4HZiJcCBsuRqQmnHcqDchEiMKoMCRUi6S5xoXQwg9QgA)
--
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
Re: [I] [Bug] Grid refresh with wrong display [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #18548:
URL: https://github.com/apache/echarts/issues/18548#issuecomment-2840241648
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!
--
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