apache
[Bug] The axes of the histogram and scatter plot do not align correctly
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
OS: macOS Monterey
Browser: Chrome 96.0.4664.55
Framework Vue@3
Any additional comments?
No response
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 } ] };
yes, the problem is real - scatter Xaxis is not vertically aligned with 0-50 right bar. 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. So unless offset is allowed to be percentage, I do not see a complete solution.