[Bug] v2热图的单元格未完全填充
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
2.0.0
Link to Minimal Reproduction
https://www.visactor.io/vchart/demo/heatmap-chart/basic-heatmap?version=2.0.0
Steps to Reproduce
const items = [
'Asset Liability Ratio',
'Asset Liability Ratio (Deducting Advance Payments)',
'Debt-to-long Capital Ratio',
'Long Term Asset Suitability Ratio',
'Equity Multiplier',
'Equity Ratio of Current Liability',
'Interest Bearing Debt / Fully Invested Capital',
'Current Liability / Total Liabilities',
'Capital Fixation Ratio',
'Expected Default Frequency'
];
const rawData = [
1.0, 0.594527, 0.492963, -0.160995, 0.723664, 0.658646, -0.857474, 0.320706, -0.284634, -0.091423, 0.594527, 1.0,
0.724546, -0.099318, 0.540639, 0.49214, -0.554039, 0.17127, -0.265259, 0.068577, 0.492963, 0.724546, 1.0, -0.091338,
0.450542, 0.375839, -0.524955, 0.300627, -0.198362, 0.033209, -0.160995, -0.099318, -0.091338, 1.0, -0.049872,
-0.028452, 0.157157, 0.009742, -0.162374, 0.155095, 0.723664, 0.540639, 0.450542, -0.049872, 1.0, 0.951933, -0.651767,
0.079052, -0.535984, 0.00798, 0.658646, 0.49214, 0.375839, -0.028452, 0.951933, 1.0, -0.543147, -0.106139, -0.52232,
0.011466, -0.857474, -0.554039, -0.524955, 0.157157, -0.651767, -0.543147, 1.0, -0.595016, 0.310521, 0.066397,
0.320706, 0.17127, 0.300627, 0.009742, 0.079052, -0.106139, -0.595016, 1.0, -0.105199, -0.064886, -0.284634,
-0.265259, -0.198362, -0.162374, -0.535984, -0.52232, 0.310521, -0.105199, 1.0, -0.080153, -0.091423, 0.068577,
0.033209, 0.155095, 0.00798, 0.011466, 0.066397, -0.064886, -0.080153, 1.0
];
const data = [];
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items.length; j++) {
data.push({
var1: items[i],
var2: 1,
value: rawData[i * items.length + j]
});
}
}
const spec = {
type: 'common',
padding: 12,
data: [
{
id: 'data0',
values: data
}
],
series: [
{
type: 'heatmap',
regionId: 'region0',
xField: 'var1',
yField: 'var2',
valueField: 'value',
cell: {
style: {
fill: {
field: 'value',
scale: 'color'
}
}
}
}
],
region: [
{
id: 'region0',
width: 200, // limit the width of the region
height: 200, // limit the height of the region
padding: {
top: 40
}
}
],
color: {
type: 'linear',
domain: [
{
dataId: 'data0',
fields: ['value']
}
],
range: ['#feedde', '#fdbe85', '#fd8d3c', '#e6550d', '#a63603']
},
axes: [
{
orient: 'bottom',
type: 'band',
grid: {
visible: false
},
domainLine: {
visible: false
},
label: {
space: 10,
style: {
textAlign: 'left',
textBaseline: 'middle',
angle: 90,
fontSize: 8
}
},
bandPadding: 0,
height: layoutRect => {
// canvas height - region height - paddingTop - paddingBottom
return layoutRect.height - 314;
}
},
{
orient: 'left',
type: 'band',
grid: {
visible: false
},
domainLine: {
visible: false
},
label: {
space: 10,
style: {
fontSize: 8
}
},
bandPadding: 0
}
],
legends: {
visible: true,
orient: 'right',
position: 'start',
type: 'color',
field: 'value'
},
title: {
visible: true,
text: `Correlation Coefficient`
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Current Behavior
Expected Behavior
Environment
- OS: macOS
- Browser: Chrome
- Framework: React
Any additional comments?
期望v2效果与1.x相同,或者有简易的配置项能保持一致的效果
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the v2 basic heatmap demo at the linked URL with the provided VChart spec, then compare its cell layout with the expected v1 behavior. Trace the heatmap region and axis sizing involved in the fixed 200×200 region and top padding. Done means the cells fully fill the intended area, or a documented configuration provides the equivalent result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100