Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] stack no work in vtable #2749

Closed
xile611 opened this issue Nov 1, 2024 · 0 comments · Fixed by #2752
Closed

[Bug] stack no work in vtable #2749

xile611 opened this issue Nov 1, 2024 · 0 comments · Fixed by #2752
Assignees
@fangsmile
Labels
bug Something isn't working

Comments

@xile611
Copy link

xile611 commented Nov 1, 2024

Version

1.9.3

Link to Minimal Reproduction

no need

Steps to Reproduce

const spec =
{
    "type": "common",
    "series": [
        {
            "id": "col_68",
            "type": "bar",
            "data": {
                "id": "col_68"
            },
            "barMinWidth": 1,
            "barMaxWidth": 30,
            "barMinHeight": 1,
            "xField": "col_66",
            "yField": "col_68",
            "seriesField": "col_72",
            "bar": {
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                },
                "style": {
                    "cursor": "pointer",
                    "fill": {
                        "0": "#",
                        "1": "1",
                        "2": "7",
                        "3": "6",
                        "4": "3",
                        "5": "F",
                        "6": "F",
                        "scale": "col_68",
                        "field": "col_72"
                    }
                }
            },
            "stack": true,
            "sortDataByAxis": true
        },
        {
            "type": "bar",
            "id": "forecast_col_68_0",
            "data": {
                "id": "forecast_col_68_0"
            },
            "xField": "col_66",
            "yField": "forecast_col_68_0",
            "stack": true,
            "point": {
                "style": {
                    "cursor": "pointer",
                    "fillOpacity": 1,
                    "lineWidth": 1,
                    "size": 8,
                    "fill": "green"
                },
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                }
            },
            "bar": {
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                },
                "style": {
                    "cursor": "pointer",
                    "fill": {
                        "0": "g",
                        "1": "r",
                        "2": "e",
                        "3": "e",
                        "4": "n",
                        "scale": "forecast_col_68_0",
                        "field": "col_72"
                    }
                }
            },
            "line": {
                "style": {
                    "stroke": "green"
                }
            },
            "area": {
                "style": {
                    "cursor": "pointer",
                    "fill": "green"
                }
            },
            "barMaxWidth": 30,
            "direction": "vertical",
            "sortDataByAxis": true
        },
        {
            "type": "bar",
            "id": "forecast_col_68_1",
            "data": {
                "id": "forecast_col_68_1"
            },
            "xField": "col_66",
            "yField": "forecast_col_68_1",
            "stack": true,
            "point": {
                "style": {
                    "cursor": "pointer",
                    "fillOpacity": 1,
                    "lineWidth": 1,
                    "size": 8,
                    "fill": "green"
                },
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                }
            },
            "bar": {
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                },
                "style": {
                    "cursor": "pointer",
                    "fill": {
                        "0": "g",
                        "1": "r",
                        "2": "e",
                        "3": "e",
                        "4": "n",
                        "scale": "forecast_col_68_1",
                        "field": "col_72"
                    }
                }
            },
            "line": {
                "style": {
                    "stroke": "green"
                }
            },
            "area": {
                "style": {
                    "cursor": "pointer",
                    "fill": "green"
                }
            },
            "barMaxWidth": 30,
            "direction": "vertical",
            "sortDataByAxis": true
        },
        {
            "type": "bar",
            "id": "forecast_col_68_2",
            "data": {
                "id": "forecast_col_68_2"
            },
            "xField": "col_66",
            "yField": "forecast_col_68_2",
            "stack": true,
            "point": {
                "style": {
                    "cursor": "pointer",
                    "fillOpacity": 1,
                    "lineWidth": 1,
                    "size": 8,
                    "fill": "green"
                },
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                }
            },
            "bar": {
                "state": {
                    "selected_reverse": {
                        "fill": "#ddd",
                        "fillOpacity": 0.2
                    }
                },
                "style": {
                    "cursor": "pointer",
                    "fill": {
                        "0": "g",
                        "1": "r",
                        "2": "e",
                        "3": "e",
                        "4": "n",
                        "scale": "forecast_col_68_2",
                        "field": "col_72"
                    }
                }
            },
            "line": {
                "style": {
                    "stroke": "green"
                }
            },
            "area": {
                "style": {
                    "cursor": "pointer",
                    "fill": "green"
                }
            },
            "barMaxWidth": 30,
            "direction": "vertical",
            "sortDataByAxis": true
        }
    ],
    "axes": [
        {
            "range": {
                "min": 0,
                "max": 749226
            },
            "label": {
                "style": {
                    "fontSize": 14
                },
                "visible": false,
                "flush": true
            },
            "orient": "left",
            "seriesId": [
                "col_68",
                "forecast_col_68_0",
                "forecast_col_68_1",
                "forecast_col_68_2"
            ],
            "type": "linear",
            "min": 0,
            "max": 749226,
            "grid": {},
            "title": {
                "visible": false
            },
            "domainLine": {
                "visible": false
            },
            "seriesIndex": 0,
            "sync": {
                "axisId": "NO_AXISID_FRO_VTABLE"
            }
        },
        {
            "range": {
                "min": 0,
                "max": 749226
            },
            "label": {
                "style": {
                    "fontSize": 14
                },
                "visible": false,
                "flush": true
            },
            "orient": "right",
            "visible": false,
            "min": 0,
            "max": 749226,
            "seriesId": [
                "col_68",
                "forecast_col_68_0",
                "forecast_col_68_1",
                "forecast_col_68_2"
            ],
            "type": "linear",
            "grid": {},
            "title": {
                "visible": false
            },
            "domainLine": {
                "visible": false
            },
            "seriesIndex": 1,
            "sync": {
                "axisId": "NO_AXISID_FRO_VTABLE"
            }
        },
        {
            "range": {
                "min": 0,
                "max": 749226
            },
            "label": {
                "style": {
                    "fontSize": 14
                },
                "visible": false,
                "flush": true
            },
            "orient": "right",
            "visible": false,
            "min": 0,
            "max": 749226,
            "seriesId": [
                "col_68",
                "forecast_col_68_0",
                "forecast_col_68_1",
                "forecast_col_68_2"
            ],
            "type": "linear",
            "grid": {},
            "title": {
                "visible": false
            },
            "domainLine": {
                "visible": false
            },
            "seriesIndex": 2,
            "sync": {
                "axisId": "NO_AXISID_FRO_VTABLE"
            }
        },
        {
            "range": {
                "min": 0,
                "max": 749226
            },
            "label": {
                "style": {
                    "fontSize": 14
                },
                "visible": false,
                "flush": true
            },
            "orient": "right",
            "visible": false,
            "min": 0,
            "max": 749226,
            "seriesId": [
                "col_68",
                "forecast_col_68_0",
                "forecast_col_68_1",
                "forecast_col_68_2"
            ],
            "type": "linear",
            "grid": {},
            "title": {
                "visible": false
            },
            "domainLine": {
                "visible": false
            },
            "seriesIndex": 3,
            "sync": {
                "axisId": "NO_AXISID_FRO_VTABLE"
            }
        },
        {
            "domain": [
                "2020",
                "2021",
                "2022",
                "2023",
                "2024",
                "2025",
                "2026",
                "2027"
            ],
            "label": {
                "style": {
                    "fontSize": 14
                },
                "visible": false
            },
            "orient": "bottom",
            "type": "band",
            "grid": {},
            "visible": true,
            "domainLine": {
                "visible": false
            },
            "tick": {
                "visible": false
            },
            "subTick": {
                "visible": false
            },
            "title": {
                "visible": false
            }
        }
    ],
    "scales": [
        {
            "id": "col_68",
            "type": "ordinal",
            "range": [
                "#72ccff",
                "#76f2f2",
                "#d2f5a6"
            ],
            "domain": [
                "公司",
                "小型企业",
                "消费者"
            ]
        },
        {
            "id": "forecast_col_68_0",
            "type": "ordinal",
            "range": [
                "#72ccff"
            ],
            "colorMappingValue": "公司"
        },
        {
            "id": "forecast_col_68_1",
            "type": "ordinal",
            "range": [
                "#76f2f2"
            ],
            "colorMappingValue": "小型企业"
        },
        {
            "id": "forecast_col_68_2",
            "type": "ordinal",
            "range": [
                "#d2f5a6"
            ],
            "colorMappingValue": "消费者"
        }
    ],
    "tooltip": {
        "visible": true,
        "mark": {
            "title": {
                "visible": false
            },
            "content": [
                {
                    "id": "TJ9194a62fe76749788aecd5925dc780",
                    "fieldName": "col_66"
                },
                {
                    "id": "TJ200a26d26f914d8d9266f4879a44a5",
                    "fieldName": "col_72"
                },
                {
                    "id": "TJ09eb1a9575674cac82a34b1f094f7c",
                    "fieldName": "col_68"
                },
                {
                    "id": "TJ7510091ab7fe4c86a466ac353b863e",
                    "fieldName": "col_70"
                }
            ]
        },
        "dimension": {
            "visible": false
        },
        "style": {},
        "renderMode": "html",
        "throttleInterval": 150,
        "parentElement": {},
        "group": {
            "title": {
                "visible": false
            },
            "valueLabel": {
                "visible": false
            },
            "triggerMark": "line"
        }
    },
    "markArea": [],
    "color": {
        "type": "ordinal",
        "range": [
            "#1763FF"
        ]
    },
    "label": {
        "visible": false
    },
    "markLine": [],
    "sortDataByAxis": true,
    "padding": 0,
    "dataZoom": []
}
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.updateModelSpecSync(
          { type: 'axes', index:0 },
          { min: 0, max: 749226 },
          true
        );
        vchart.updateModelSpecSync(
          { type: 'axes', index:1 },
          { min: 0, max: 749226 },
          true
        );
        vchart.updateModelSpecSync(
          { type: 'axes', index:2 },
          { min: 0, max: 749226 },
          true
        );
        vchart.updateModelSpecSync(
          { type: 'axes', index:3 },
          { min: 0, max: 749226 },
          true
        );
           vchart.updateModelSpecSync(
          { type: 'axes', index:4 },
          { domain:[
    "2020",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025",
    "2026",
    "2027"
]},
true
);
vchart.updateFullDataSync([
    {
        "id": "col_68",
        "values": [
            {
                "col_66": "2020",
                "col_68": 100000.52000000009,
                "col_72": "公司"
            },
            {
                "col_66": "2020",
                "col_68": 100000.58999999998,
                "col_72": "小型企业"
            },
            {
                "col_66": "2020",
                "col_68": 100000.18999999997,
                "col_72": "消费者"
            },
            {
                "col_66": "2021",
                "col_68": 149120.56000000008,
                "col_72": "公司"
            },
            {
                "col_66": "2021",
                "col_68": 249066.1199999998,
                "col_72": "消费者"
            },
            {
                "col_66": "2021",
                "col_68": 73283.42000000001,
                "col_72": "小型企业"
            },
            {
                "col_66": "2022",
                "col_68": 335807.3000000005,
                "col_72": "消费者"
            },
            {
                "col_66": "2022",
                "col_68": 118795.0200000001,
                "col_72": "小型企业"
            },
            {
                "col_66": "2022",
                "col_68": 167340.70000000004,
                "col_72": "公司"
            },
            {
                "col_66": "2023",
                "col_68": 307599.0799999995,
                "col_72": "消费者"
            },
            {
                "col_66": "2023",
                "col_68": 135421.5200000001,
                "col_72": "小型企业"
            },
            {
                "col_66": "2023",
                "col_68": 238093.91000000024,
                "col_72": "公司"
            }
        ]
    },
    {
        "id": "forecast_col_68_0",
        "values": [
            {
                "col_66": "2024",
                "col_72": "公司",
                "forecast_col_68_0": 100000.0276633095
            },
            {
                "col_66": "2025",
                "col_72": "公司",
                "forecast_col_68_0": 183294.9225433866
            },
            {
                "col_66": "2026",
                "col_72": "公司",
                "forecast_col_68_0": 118817.9535781267
            },
            {
                "col_66": "2027",
                "col_72": "公司",
                "forecast_col_68_0": 161064.85035400663
            }
        ]
    },
    {
        "id": "forecast_col_68_1",
        "values": [
            {
                "col_66": "2024",
                "col_72": "小型企业",
                "forecast_col_68_1": 100000.62862597249
            },
            {
                "col_66": "2025",
                "col_72": "小型企业",
                "forecast_col_68_1": 70216.331162236
            },
            {
                "col_66": "2026",
                "col_72": "小型企业",
                "forecast_col_68_1": 111221.74194103418
            },
            {
                "col_66": "2027",
                "col_72": "小型企业",
                "forecast_col_68_1": 137661.13614431204
            }
        ]
    },
    {
        "id": "forecast_col_68_2",
        "values": [
            {
                "col_66": "2024",
                "col_72": "消费者",
                "forecast_col_68_2": 201225.5244694646
            },
            {
                "col_66": "2025",
                "col_72": "消费者",
                "forecast_col_68_2": 155399.80723605416
            },
            {
                "col_66": "2026",
                "col_72": "消费者",
                "forecast_col_68_2": 229879.5499043006
            },
            {
                "col_66": "2027",
                "col_72": "消费者",
                "forecast_col_68_2": 327541.7274890139
            }
        ]
    }
])
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

image

Expected Behavior

bars are stacked

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@xile611 xile611 added the bug Something isn't working label Nov 1, 2024
@xile611 xile611 self-assigned this Nov 4, 2024
@fangsmile fangsmile transferred this issue from VisActor/VChart Nov 4, 2024
@fangsmile fangsmile assigned fangsmile and unassigned xile611 Nov 4, 2024
fangsmile added a commit that referenced this issue Nov 4, 2024
@fangsmile
fix: parse axes config error when user set axes #2749
04d71f1
@fangsmile fangsmile linked a pull request Nov 4, 2024 that will close this issue
2749 bug stack no work in vtable #2752
Merged
21 tasks
@github-actions github-actions bot mentioned this issue Nov 7, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fangsmile fangsmile

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

2749 bug stack no work in vtable VisActor/VTable
2 participants
@fangsmile @xile611