Chart.js树形图插件渲染时SVG显示context.raw坐标数据问题求助

问题诊断与解决方案 #

1. 配置未完整关联到图表实例 #

你的代码中单独定义了options对象，但未将其合并到config或传递给<Chart>组件，导致部分插件配置（如标签隐藏逻辑）未生效。

修复：
将options合并到config中，或在渲染组件时显式传递：

const config = {
    type: "treemap",
    data: { /* 你的数据配置 */ },
    options: options // 合并options到config
};

// 或在返回组件时传递
return <Chart config={config} options={options} />;

2. 意外启用了数据标签插件 #

如果项目全局注册了chartjs-plugin-datalabels，即便关闭了treemap的labels，该插件仍可能默认渲染数据。需针对性关闭：

修复：
在数据集配置中添加datalabels: { display: false }，或全局禁用：

// 数据集内单独关闭
const config = {
    data: {
        datasets: [
            {
                // ...其他配置...
                datalabels: { display: false }
            }
        ]
    }
};

// 或全局配置关闭
const options = {
    plugins: {
        datalabels: { display: false },
        // ...其他插件配置...
    }
};

3. treemap插件版本/内部渲染bug #

部分旧版本chartjs-chart-treemap存在labels.display: false仍渲染坐标的bug，可尝试升级插件到最新版，或通过CSS临时隐藏：

/* 隐藏treemap SVG中的意外文本 */
canvas.chartjs-render-monitor text {
    display: none !important;
}

4. 排查context.raw的来源 #

可在backgroundColor回调中打印完整context对象，确认是否是插件传递的额外数据导致渲染：

backgroundColor(context) {
    console.log('完整context:', context);
    // ...原有逻辑...
}

调整后的完整代码示例：

import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from "chart.js";
import { color } from "chart.js/helpers";
import { TreemapController, TreemapElement } from "chartjs-chart-treemap";
import { Chart } from "react-chartjs-2";

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    TreemapController,
    TreemapElement
);

export const TreeMapChart = (props) => {
    const data = props.datasets.map((el, index) => ({
        name: props.labels[index],
        value: el
    }));

    const colors = [
        "#735FA4", "#F39459", "#E0044E", "#61BA93", "#43224D",
        "#A9264F", "#3265AA", "#4CB4E6", "#F288AC", "#A297B4",
        "#993684", "#4C4C4D"
    ];

    const options = {
        plugins: {
            title: { display: false },
            legend: { display: false },
            tooltip: {
                displayColors: true,
                callbacks: {
                    title(items) {
                        return items[0].raw._data.name;
                    },
                    label(item) {
                        return [`Number of docs: ${item.raw._data.value}`];
                    },
                },
            },
            datalabels: { display: false }
        },
    };

    const config = {
        type: "treemap",
        data: {
            datasets: [
                {
                    tree: data,
                    key: "value",
                    labels: {
                        display: false,
                        formatter: (context) => context.raw._data.name,
                    },
                    datalabels: { display: false },
                    backgroundColor(context) {
                        if (context.type !== "data") return "transparent";
                        const { value } = context.raw._data;
                        return value === 0 
                            ? color("grey").rgbString() 
                            : colors[context.dataIndex % colors.length];
                    },
                },
            ],
        },
        options: options,
    };

    return <Chart {...config} />;
};

内容的提问来源于stack exchange，提问作者Utsav