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] some issues about marker label when the label type is richText #3790

Open
kkxxkk2019 opened this issue Mar 10, 2025 · 1 comment
Open

[Bug] some issues about marker label when the label type is richText #3790

kkxxkk2019 opened this issue Mar 10, 2025 · 1 comment
Assignees
@kkxxkk2019
Labels
bug Something isn't working

Comments

@kkxxkk2019
Copy link
Collaborator

Version

latest

Link to Minimal Reproduction

NA

Steps to Reproduce

当标注的文本是富文本时，和普通文本时的渲染位置有偏移，同时 containerAlign 没有生效。

const spec = {
  "direction": "vertical",
  "type": "common",
  "series": [
    {
      "type": "bar",
      "stack": true,
      "direction": "vertical",
      "bar": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        },
        "state": {
          "hover": {
            "stroke": "#000",
            "lineWidth": 1
          }
        }
      },
      "barBackground": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        }
      },
      "label": {
        "visible": true,
        "position": "inside",
        "style": {
          "lineHeight": "100%",
          "fontSize": 16,
          "fontWeight": "bold",
          "pickMode": "imprecise"
        },
        "overlap": {
          "strategy": []
        },
        "smartInvert": true,
        "formatConfig": {},
        "interactive": true
      },
      "totalLabel": {
        "visible": true,
        "position": "top",
        "overlap": false,
        "clampForce": false,
        "formatConfig": {
          "fixed": 0,
          "content": "value"
        },
        "style": {
          "lineHeight": "100%",
          "lineWidth": 1,
          "fill": "#1F2329",
          "stroke": "#ffffff",
          "fontSize": 16,
          "fontWeight": "bold",
          "pickMode": "imprecise"
        },
        "interactive": true
      },
      "seriesLabel": {
        "visible": true,
        "position": "end",
        "label": {
          "style": {
            "lineHeight": "100%",
            "lineWidth": 1,
            "stroke": "#ffffff",
            "fontSize": 16,
            "fontWeight": "bold"
          },
          "space": 10
        }
      },
      "xField": "_editor_dimension_field",
      "yField": "_editor_value_field",
      "dataId": "0",
      "id": "series-0",
      "EDITOR_SERIES_DATA_KEY": "a",
      "seriesField": "_editor_type_field"
    },
    {
      "type": "bar",
      "stack": true,
      "direction": "vertical",
      "bar": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        },
        "state": {
          "hover": {
            "stroke": "#000",
            "lineWidth": 1
          }
        }
      },
      "barBackground": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        }
      },
      "label": {
        "visible": true,
        "position": "inside",
        "style": {
          "lineHeight": "100%",
          "fontSize": 16,
          "fontWeight": "bold",
          "pickMode": "imprecise"
        },
        "overlap": {
          "strategy": []
        },
        "smartInvert": true,
        "formatConfig": {},
        "interactive": true
      },
      "totalLabel": {
        "visible": true,
        "position": "top",
        "overlap": false,
        "clampForce": false,
        "formatConfig": {
          "fixed": 0,
          "content": "value"
        },
        "style": {
          "lineHeight": "100%",
          "lineWidth": 1,
          "fill": "#1F2329",
          "stroke": "#ffffff",
          "fontSize": 16,
          "fontWeight": "bold",
          "pickMode": "imprecise"
        },
        "interactive": true
      },
      "seriesLabel": {
        "visible": true,
        "position": "end",
        "label": {
          "style": {
            "lineHeight": "100%",
            "lineWidth": 1,
            "stroke": "#ffffff",
            "fontSize": 16,
            "fontWeight": "bold"
          },
          "space": 10
        }
      },
      "xField": "_editor_dimension_field",
      "yField": "_editor_value_field",
      "dataId": "1",
      "id": "series-1",
      "EDITOR_SERIES_DATA_KEY": "b",
      "seriesField": "_editor_type_field"
    }
  ],
  "axes": [
    {
      "orient": "left",
      "id": "axis-left",
      "type": "linear",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#1F2329",
          "fontSize": 16,
          "lineWidth": 1
        },
        "formatConfig": {},
        "_originStyle": {
          "fill": "#1F2329",
          "fontSize": 16,
          "lineWidth": 1
        }
      },
      "domainLine": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "tick": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "grid": {
        "visible": false,
        "style": {
          "stroke": "#bbbfc4"
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null
    },
    {
      "orient": "bottom",
      "id": "axis-bottom",
      "type": "band",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#1F2329",
          "fontSize": 16,
          "lineWidth": 1
        },
        "formatConfig": {},
        "_originStyle": {
          "fill": "#1F2329",
          "fontSize": 16,
          "lineWidth": 1
        }
      },
      "domainLine": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        },
        "onZero": true
      },
      "tick": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "grid": {
        "visible": false,
        "style": {
          "stroke": "#bbbfc4"
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null,
      "trimPadding": false,
      "paddingInner": [
        0.2,
        0
      ],
      "paddingOuter": [
        0.2,
        0
      ]
    }
  ],
  "data": [
    {
      "id": "0",
      "sourceKey": "a",
      "values": [
        {
          "_editor_dimension_field": "x1",
          "_editor_value_field": 20,
          "_editor_type_field": "a"
        },
        {
          "_editor_dimension_field": "x2",
          "_editor_value_field": 23,
          "_editor_type_field": "a"
        },
        {
          "_editor_dimension_field": "x3",
          "_editor_value_field": 26,
          "_editor_type_field": "a"
        }
      ],
      "specField": {
        "_editor_dimension_field": {
          "type": "dimension",
          "order": 0
        },
        "_editor_type_field": {
          "type": "series",
          "order": 0
        },
        "_editor_value_field": {
          "type": "value",
          "order": 0
        }
      }
    },
    {
      "id": "1",
      "sourceKey": "b",
      "values": [
        {
          "_editor_dimension_field": "x1",
          "_editor_value_field": 20,
          "_editor_type_field": "b"
        },
        {
          "_editor_dimension_field": "x2",
          "_editor_value_field": 24,
          "_editor_type_field": "b"
        },
        {
          "_editor_dimension_field": "x3",
          "_editor_value_field": 29,
          "_editor_type_field": "b"
        }
      ],
      "specField": {
        "_editor_dimension_field": {
          "type": "dimension",
          "order": 0
        },
        "_editor_type_field": {
          "type": "series",
          "order": 0
        },
        "_editor_value_field": {
          "type": "value",
          "order": 0
        }
      }
    }
  ],
  "markArea": [
    {
      "id": "e564b390-0d7d-4efe-bee9-5278ae888277",
      "name": "h-area",
      "interactive": true,
      "y": "70.78346707514214%",
      "y1": "20.783467075142138%",
      "area": {
        "style": {
          "fill": "#005DFF",
          "fillOpacity": 0.1
        }
      },
      "label": {
        "position": "right",
        "text": [
          {
            "text": "1",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": "8",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": " ",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": "-",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": " ",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": "4",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "text": "8",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fill": "#1F2329",
            "fontFamily": "D-Din"
          },
          {
            "fill": "#1F2329",
            "text": "\n",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "标",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "注",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "标",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "签",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "标",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "注",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "标",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          },
          {
            "fill": "#1F2329",
            "text": "签",
            "fontSize": 16,
            "fontWeight": "bold",
            "fontStyle": "normal",
            "fontFamily": "D-Din",
            "isComposing": false
          }
        ],
        "labelBackground": {
          "visible": true,
          "style": {
            "fill": "#fff",
            "fillOpacity": 1,
            "stroke": "#000",
            "lineWidth": 1,
            "cornerRadius": 4
          },
          "padding": {
            "top": 2,
            "bottom": 2,
            "right": 4,
            "left": 4
          }
        },
        "style": {
          "fill": "#1F2329",
          "fontSize": 16,
          "fontWeight": "bold",
          "fontStyle": "normal",
          "background": null,
          "lineHeight": "100%",
          "upgradeAttrs": {
            "lineHeight": true,
            "multiBreakLine": true
          },
          "textAlign": "left",
          "textBaseline": "middle"
        },
        "dx": 6,
        "pickable": true,
        "childrenPickable": false,
        "type": "rich",
        "__position__": "right",
        "dy": 0,
        "containerTextAlign": "end"
      },
      "_originValue_": [
        17.52991975491472,
        47.529919754914715
      ],
      "_editor_marker_label_": "18 - 48",
      "zIndex": 500,
      "_editor_marker_format_": false
    },
    {
      "id": "fee69927-ccf2-4b9a-92d8-671bd3649b0c",
      "name": "h-area",
      "interactive": true,
      "y": "100%",
      "y1": "50%",
      "area": {
        "style": {
          "fill": "#005DFF",
          "fillOpacity": 0.1
        }
      },
      "label": {
        "position": "right",
        "text": ["18 - 48", '标注标签标注标签'],
        "labelBackground": {
          "visible": true,
          "style": {
            "fill": "#fff",
            "fillOpacity": 1,
            "stroke": "#000",
            "lineWidth": 1,
            "cornerRadius": 4
          }
        },
        "style": {
          "fill": "#1F2329",
          "fontSize": 16,
          "fontWeight": "bold"
        },
        "dx": 6,
        "pickable": true,
        "childrenPickable": false
      },
      "_originValue_": [
        0,
        30
      ],
      "_editor_marker_label_": "0 - 30",
      "zIndex": 500
    }
  ],
  padding: [20, 160, 20, 20]
};

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

Image

Expected Behavior

fix it.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@kkxxkk2019 kkxxkk2019 added the bug Something isn't working label Mar 10, 2025
@kkxxkk2019 kkxxkk2019 self-assigned this Mar 10, 2025
@kkxxkk2019
Copy link
Collaborator Author

VisActor/VRender#1774

@kkxxkk2019 kkxxkk2019 mentioned this issue Mar 10, 2025
Merged
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkxxkk2019 kkxxkk2019

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

No branches or pull requests
1 participant
@kkxxkk2019