You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "xieyeying (via GitHub)" <gi...@apache.org> on 2024/12/25 07:10:30 UTC
[I] [Bug] The axes of the histogram and scatter plot do not align correctly [echarts]
xieyeying opened a new issue, #20619:
URL: https://github.com/apache/echarts/issues/20619
### Version
5.5.1
### Link to Minimal Reproduction
无
### Steps to Reproduce
I encountered an issue while trying to align the axes of a histogram and a scatter plot. The problem is that the x-axis and y-axis of the histogram do not correctly align with the corresponding axes of the scatter plot.
I created two histograms and one scatter plot, and all three use corresponding x-axis and y-axis ranges.
However, when rendering these three charts simultaneously, the axes of the histogram do not align correctly with those of the scatter plot. There is an offset or misalignment in the values on both the x-axis and y-axis.
Is there any way to ensure that the axes of these two charts align perfectly?
this is option: option.value = {
backgroundColor: '#FAFAFA',
dataset: [
{
source: chartData.value.actual_to_predicted
},
{
transform: {
type: 'ecStat:histogram',
config: {}
}
},
{
transform: {
type: 'ecStat:histogram', // 分箱 统计每个区间内的数据点数量
config: { dimensions: [1] }, // 表示将使用第二列来生成数据
}
}
],
tooltip: {},
grid: [
{ // 中间的散点图
top: '30%',
right: '30%'
},
{ // 上面的柱状图
bottom: '70%',
right: '30%'
},
{ // 右边的柱状图
top: '30%',
left: '70%'
}
],
xAxis: [
{
type: 'value',
scale: true,
gridIndex: 0,
min: xAxisMin,
max: xAxisMax,
},
{
type: 'category',
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 1,
},
{
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 2,
}
],
yAxis: [
{
scale: true,
type: 'value',
gridIndex: 0,
max: yAxisMax,
min: yAxisMin,
},
{
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 1,
},
{
scale: true,
type: 'category',
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 2,
}
],
### Current Behavior
### Expected Behavior
one-to-one correspondence
### Environment
```markdown
OS: macOS Monterey
Browser: Chrome 96.0.4664.55
Framework Vue@3
```
### 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
Re: [I] [Bug] The axes of the histogram and scatter plot do not align correctly [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #20619:
URL: https://github.com/apache/echarts/issues/20619#issuecomment-2563961262
Your Minimal Reproduction code is incomplete.
The [official example](https://echarts.apache.org/examples/en/editor.html?c=bar-histogram) works OK.
--
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] The axes of the histogram and scatter plot do not align correctly [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #20619:
URL: https://github.com/apache/echarts/issues/20619#issuecomment-2568555178
yes, the problem is real - scatter Xaxis is not vertically aligned with 0-50 right bar.
[offset](https://echarts.apache.org/en/option.html#xAxis.offset) is one way to fix that, but _offset_ is in pixels and it makes the chart unresponsive on resize. I tried to recalculate the offset on each resize, but it's not accurate - [Demo](https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&code=PTAEGUFNNALAXeAHAzgLhAcwJb1gVwCMA6AYwHsBbYSCygM0htNgEMAneFAWhXlfgAoWm04pi7SDj6R2AFXasAdinrl2lABS1w_eMXiKVajcVjY-5TIsoBKANyDy9FKAC8obgDYADI_JI8NjkSu6gAN6CoKAAJgKsKJDwaKAA2lHRERmZoCjk-OykkCnpOTmp3AAcxADMADSeAIwALDUAunXZZRXV9aDNPh1d5b0NLe2dZZmp1V4NAEwtQ1PRM8SVCwCsjcsrqY0-xJsLXrtT-4cA7A2Vp5N7B-sNAJwTw9ONjcQ-Y5d376tPt8Gtwas8zt0gY0FosIeUgfMxpVKnCPl8-ptLqjAV9mi8dvdzkC8aBGs8CQC0kDrqAUYTIfNgaTnv8VlTGc9flj6fCOWNNm82fsarUFj4KULGiKaWTwTyPiKNv1uZT9s0mZUJQ91YjQM86aqWkcxrD5YCvEyairJRa-o15tiqZdRaSfJtHftncdSV4DZLnZzac0PY1qj9mdaHmH-e6zWl5oc5qT5rHVd77YN3m0ugBfenhUCGZSqdSUFIF-AATyQxVAAHIdHo0OZLNZWJQ6w0KEp6NhMOWc6BB3mupEpkXjKXy5SqzWUg3SLoBM2LPArDZO5Tu73-xFYthKJAVMEVCUdkP3jncxkOoXcAAbYrheCQAAe
yXrzhcSXrI-ia_Ie8giQAd7msbAYhKUdCwCedNh8ABSTtQHYPsEDgxC6yHfNQEIchECoDCkIaVDMHQ-t4KQ7DoLXECKMwhpH3oD8602eYqKvaJdlfABBV8LCgnIC3AmIAEklBiN8UnDd4v0SD9nBQBpWH4lAABlsCUJ8QgALVkcg0HoVh70SPNQFzfN3lnWs61IAQpHUStNymEAUDsx8UkMfBIHlFSLDkbBSAAa3LXJYHIAB3FIjJMmA_zKPz1NYQhIHvUKUHCqLQBixJqKmRKNK09LMui4zcvinIRPEyTXxSRoLOgqqJKk0B5gvLj7krPiBLSRrULE5ratAHw8syYT-uqlrGlG6IxzKaz5zsl9MEc5CQHeRKAuC4rItK2KZsyArktSnaspyuLfNUwrawLDLduysqLveJqapSRFrw6jJElQyB0F6oT3iUdsbPUPtsGUe9ciWl92Gc-bqxstyBBhuGcl41TJqGn53i6jHBuk-UjwoSTQoAoDsDo1Jw3PCrMjifh5Mx6SGoBqYgcPecWzXNsO3lBb60IDhUcydGLCZ0l5VxsX8Yl95BfYAB1CC8HnZ5nlqYj3nvY60r3O6sq8nzQCQcgUFwE951orDaeiInyBJvcsYaSs6oaXBIEoAA5YGUmaA7onphIknF-qclpuacnZmyufXdthf_BH53l-PQFFlBxd1HHuvTmX3qmeWlZiFX6zVjWU-1lLddukrC3YbyGhNs2ghCedSIQa3CaUYmbtT13QBd4a3ZfL2ff6f3YniRnc4-0BsxzRwIs0mJIuIVgYhiABRAA3I94A0mQtPYTQ60kM2AC9IGQzRbHcAA-LJolgWAwkoSsAGFRH0TAkgACUgND4DX0cNEAIzclDEDTlTNoxA5I_g8IpYA8EfAACon7ANAKAk8BgHyQAMG-eAYQsJ1gANSYJCBA7OUCYH0G_PAdBr8P4cH0PJAA8oEE8mgyFKFsIIHMtggA).
So unless _offset_ is allowed to be **percentage**, I do not see a complete solution.
--
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] The axes of the histogram and scatter plot do not align correctly [echarts]
Posted by "xieyeying (via GitHub)" <gi...@apache.org>.
xieyeying commented on issue #20619:
URL: https://github.com/apache/echarts/issues/20619#issuecomment-2567509262
I tried modifying the parameters on the official example, but the histogram range chromosome was not accurate.
`// See https://github.com/ecomfe/echarts-stat
echarts.registerTransform(ecStat.transform.histogram);
option = {
dataset: [
{
source: [
[-8.3, -143],
[-8.3, 40],
[8.3, 143],
[8.6, 214],
[8.8, 251],
[10.5, 26],
[10.7, 86],
[10.8, 93],
[11.0, 176],
[11.0, 39],
[11.1, 221],
[11.2, 188],
[11.3, 57],
[11.4, 91],
[11.4, 191],
[11.7, 8],
[12.0, 196],
[12.9, 177],
[12.9, 153],
[13.3, 201],
[13.7, 199],
[13.8, 47],
[14.0, 81],
[14.2, 98],
[14.5, 121],
[16.0, 37],
[16.3, 12],
[17.3, 105],
[17.5, 168],
[17.9, 84],
[18.0, 197],
[18.0, 155],
[20.6, 125],
[5, 120]
]
},
{
transform: {
type: 'ecStat:histogram',
config: {}
}
},
{
transform: {
type: 'ecStat:histogram',
// print: true,
config: { dimensions: [1] }
}
}
],
tooltip: {},
grid: [
{
top: '50%',
right: '50%'
},
{
bottom: '52%',
right: '50%'
},
{
top: '50%',
left: '52%'
}
],
xAxis: [
{
scale: true,
gridIndex: 0
},
{
type: 'category',
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
gridIndex: 1
},
{
scale: true,
gridIndex: 2
}
],
yAxis: [
{
gridIndex: 0
},
{
gridIndex: 1
},
{
type: 'category',
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
gridIndex: 2
}
],
series: [
{
name: 'origianl scatter',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
encode: { tooltip: [0, 1] },
datasetIndex: 0
},
{
name: 'histogram',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: '99.3%',
label: {
show: true,
position: 'top'
},
encode: { x: 0, y: 1, itemName: 4 },
datasetIndex: 1
},
{
name: 'histogram',
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
barWidth: '99.3%',
label: {
show: true,
position: 'right'
},
encode: { x: 1, y: 0, itemName: 4 },
datasetIndex: 2
}
]
};`
--
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