漏斗图 guide text 对齐问题

[letica]

设置了guide text：

chart.guide().text({
    position: [obj.quantityName, 0.5],  
});

但是，不同数据行数下都不能居中显示，请问是什么原因呢？展示效果如下所示：

相关代码：

<f2 onInit="onInit"></f2>

import intervalLabel from '@antv/f2/lib/plugin/interval-label';

let chart = null;

Component({
  methods: {
    onInit(F2, config) {
      chart = new F2.Chart({
        ...config,
        padding: [20, 100, 0, 30],
        plugins: [intervalLabel]
      });
      this.updateChart();
      return chart;
    },

    updateChart() {
      if (!chart) return;
      const chartData = this.getFormattedData();
      chart.source(chartData);
      chart.axis(false);
      chart.coord({
        transposed: true,
        scale: [1, -1]
      });

      chart.legend(false);

      chart.intervalLabel({
        offsetX: 8,
        label: (data, color) => {
          return {
            text: `${data.quantityName} ${data.quantity}`,
            fill: color
          };
        }
      });

      // 提示文案
      chartData.forEach((obj) => {
        chart.guide().text({
          position: [obj.quantityName, 0.5],  
          content: obj.rate,
          style: {
            textBaseline: 'middle',
            textAlign: 'center',
            fill: '#666',
            fontSize: 10
          }
        });
      });

      chart.interval()
        .position('quantityName*percent')
        .color('quantityName', ['#eef9fe', '#eaf5fe', '#e3eefe', '#dae6fe', '#d2defe', '#cbd6fe', '#cacefe', '#bac2fe', '#abb2fe'])
        .adjust('symmetric')
        .style({
          lineWidth: 2,
          stroke: '#fff'
        })
        .shape('funnel');
      chart.render();
    },
    getFormattedData() {
      // const data = this.props.rawData[this.data.ch] || [];
      const data = [
        {
          "quantity": "29",
          "quantityName": "数据1"
        },
        {
          "rate": "93.1",
          "rateName": "有效线索率",
          "quantity": "27",
          "quantityName": "数据2"
        },
        {
          "rate": "10.34",
          "rateName": "持续跟进率",
          "quantity": "3",
          "quantityName": "数据3"
        },
        {
          "rate": "10.34",
          "rateName": "已邀约率",
          "quantity": "3",
          "quantityName": "数据4"
        },
        {
          "rate": "10.34",
          "rateName": "已到店率",
          "quantity": "3",
          "quantityName": "数据5"
        },
        {
          "rate": "6.9",
          "rateName": "已试听率",
          "quantity": "2",
          "quantityName": "数据6"
        },
        {
          "rate": "3.45",
          "rateName": "已成交率",
          "quantity": "1",
          "quantityName": "数据7"
        },
        {
          "rate": "6.9",
          "rateName": "aaa",
          "quantity": "2",
          "quantityName": "数据8"
        },
        {
          "rate": "3.45",
          "rateName": "bbb",
          "quantity": "1",
          "quantityName": "数据9"
        }
      ];
      let percent = (data.length + 1) * 0.1;
      return data.map((item) => {
        percent -= 0.1;
        return {
          ...item,
          percent
        };
      });
    },
  }
});

[zengyue]

是哪个小程序？

[letica]

是哪个小程序？

钉钉小程序

[zengyue]

可能是钉钉小程序上文本测算不准导致的

https://github.com/antvis/f2-context/blob/master/src/context/my.ts#L52

把context的这个方法复写下试试

[letica]

可能是钉钉小程序上文本测算不准导致的

https://github.com/antvis/f2-context/blob/master/src/context/my.ts#L52

把context的这个方法复写下试试

这样吗？要怎么改呢。。 请问measureText是什么时候调用的？在方法内打断点是没有执行的

      import { my as my$1 } from '@antv/f2-context';

      const context = my$1(myCtx);
      context.measureText = (text) => {
        let fontSize = 12;
        const font = myCtx.__font;
        if (font) {
          fontSize = parseInt(font.split(' ')[3], 10);
        }
        fontSize /= 2;
        return {
          width: strLen(text) * fontSize
        };
      };
      config.context = context;

      chart = new F2.Chart({
        ...config,
        padding: [20, 100, 0, 30],
        plugins: [intervalLabel]
      });

[zengyue]

const { context  } = config;
context.measureText = (text) => {
        let fontSize = 12;
        const font = myCtx.__font;
        if (font) {
          fontSize = parseInt(font.split(' ')[3], 10);
        }
        fontSize /= 2;
        return {
          width: strLen(text) * fontSize
        };
      };
chart = new F2.Chart({
        ...config,
        padding: [20, 100, 0, 30],
        plugins: [intervalLabel]
      });

[zengyue]

能解决吗？

[letica]

能解决吗？

运行的时候measureText就没有调用诶，没解决 自己写view覆盖到上面了，正好还可以加tooltip