chart不会根据canvas自适应内容

[shuaige3213]

• F2 Version: 5.5.1
• Platform:
• Mini Showcase(like screenshots):
• CodeSandbox Link:

canvas渲染是正常大小但是内容渲染出来很大

[tangying1027]

复现demo给一个呢

[shuaige3213]

复现demo给一个呢

https://f2.antv.antgroup.com/examples/line/line/#smooth 用的官网式例 渲染出来特别大 内容不会根据容器自适应

[ColumbusK]

我也遇到了这个问题，求解 @tangying1027

复现demo给一个呢

const F2BarChart = ({ id }) => { // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。 const data = [ { genre: "Sports", sold: 275 }, { genre: "Strategy", sold: 115 }, { genre: "Action", sold: 120 }, { genre: "Shooter", sold: 350 }, { genre: "Other", sold: 150 }, ];

useEffect(() => { const query = Taro.createSelectorQuery(); console.log("query", query); const pixelRatio = Taro.getSystemInfoSync().pixelRatio;

query
  .select(`#${id}`)
  .node()
  .exec((res) => {
    console.log("res", res);
    const { node, width, height } = res[0];
    console.log("width", width, height);
    console.log("node", node);
    const canvas = res[0].node;
    console.log();
    const context = canvas.getContext("2d");
    console.log("context", context);

    const { props } = (
      <AntdCanvas
        context={context}
        pixelRatio={pixelRatio}
        width={330}
        height={200}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          fontSize: "2px",
        }}
      >
        <Chart data={data}>
          <Axis field="genre" />
          <Axis field="sold" />
          <Interval x="genre" y="sold" color="genre" />
          <Tooltip />
        </Chart>
      </AntdCanvas>
    );

    console.log("props", props);

    const chart = new AntdCanvas(props);
    chart.render();
  });

}, []);

return ( <Canvas type="2d" id={id} canvasId={id} style={{ width: "100%", height: "100%" }}

); };