203- 如何限制 Tootlip 内容宽度？—

问题标题

如何限制 Tootlip 内容宽度

问题描述

图表中的数据存在非常长的字符串，这种场景下，默认tooltip的展示效果并不好，需要优化其显示效果

解决方案

不同图表库的解决方案不一样，VChart 的tooltip组件，提供了对key与value的自定义配置，允许用户对图元和维度的提示信息，进行自定义设置。
在超长文本场景，通常情况下只需要使用格式化能力，对指标进行格式化，对维度进行缩略显示。
步骤一：配置tooltip.mark.content，分别对图元tooltip中的value 和 key进行格式化。
步骤二：配置tooltip.dimension.content，分别对维度tooltip中的value和key进行格式化。

代码示例

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

import VChart from "@visactor/vchart";

const App = () => {
  useEffect(() => {
    const spec = {
      type: "bar",
      data: [
        {
          id: "barData",
          values: [
            {
              month: "Monday",
              sales: 22,
              type: "LongLong",
            },
            { month: "Tuesday", sales: 13, type: "LongLongLongLong" },
            { month: "Wednesday", sales: 25, type: "LongLongLongLongLongLong" },
            {
              month: "Thursday",
              sales: 29,
              type: "LongLongLongLongLongLongLongLong",
            },
            {
              month: "Friday",
              sales: 38,
              type: "LongLongLongLongLongLongLongLongLongLong",
            },
          ],
        },
      ],
      seriesField: "type",
      xField: "month",
      yField: "sales",
      tooltip: {
        mark: {
          position: "bottom",
          content: [
            {
              key: (datum) =>
                datum.type.length < 20
                  ? datum.type
                  : datum.type.slice(0, 20) + "...",
              value: (datum) => datum.sales,
            },
          ],
        },
        dimension: {
          visible: false,
          content: [
            {
              key: (datum) =>
                datum.type.length < 20
                  ? datum.type
                  : datum.type.slice(0, 20) + "...",
              value: (datum) => datum.sales,
            },
          ],
        },
      },
    };
    const vchart = new VChart(spec, { dom: "chart" });
    vchart.renderSync();

    return () => {
      vchart.release();
    };
  }, []);

  return <div id="chart"></div>;
};

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
</br>

结果展示

Online Demo: https://codesandbox.io/p/sandbox/vchart-large-tooltip-optimize-z5jpdn?file=%2Fsrc%2Findex.js%3A1%2C1-83%2C1

问题标题

问题描述

解决方案

代码示例

结果展示

相关文档