如何调整Chart.js Treemap字体大小，实现块体尺寸匹配字号

需求：使用Chart.js的treemap组件时，希望实现较大的块字体更大、较小的块字体更小的效果，但现有配置未生效。

原配置代码：

const options = {
    legend: {
      show: true,
    },
    chart: {
      height: 350,
      type: "treemap",
      events: {
        dataPointSelection: treemapOnClick,
      },
      fontSize: "19px",
    },
    title: {
      text: "Title Here",
      align: "center",
    },

    dataLabels: {
      formatter: function (val, { seriesIndex, dataPointIndex, w }) {
        let labelWords = val.split(" ");
        let labelElements = [];
        let currentLine = "";

        for (let i = 0; i < labelWords.length; i++) {
          let word = labelWords[i];
          if (currentLine.length + word.length > 30) {
            labelElements.push(currentLine);
            currentLine = "";
          }
          if (currentLine !== "") {
            currentLine += " ";
          }
          currentLine += word;
        }

        if (currentLine !== "") {
          labelElements.push(currentLine);
        }

        return labelElements;
      },
    },
  };

组件使用代码：

<Chart options={options} series={treemapList} type="treemap" height={350} className={classes.chartStyles} />

尝试过的无效配置（针对图例字体，而非数据标签）：

plugins: {
    legend: {
      labels: {
        font: {
         size: 18,
      },
    },
  },
},

解决方案：动态设置数据标签的字体大小 #

之前的配置是针对图例（legend）的字体，而非树形图块上的数据标签（dataLabels），所以无法实现需求。要让字体随块大小变化，需在dataLabels中添加style函数，根据每个数据点的数值动态计算字体大小。

修改后的options配置（重点修改dataLabels部分）：

const options = {
    legend: {
      show: true,
    },
    chart: {
      height: 350,
      type: "treemap",
      events: {
        dataPointSelection: treemapOnClick,
      },
    },
    title: {
      text: "Title Here",
      align: "center",
    },

    dataLabels: {
      formatter: function (val, { seriesIndex, dataPointIndex, w }) {
        let labelWords = val.split(" ");
        let labelElements = [];
        let currentLine = "";

        for (let i = 0; i < labelWords.length; i++) {
          let word = labelWords[i];
          if (currentLine.length + word.length > 30) {
            labelElements.push(currentLine);
            currentLine = "";
          }
          if (currentLine !== "") {
            currentLine += " ";
          }
          currentLine += word;
        }

        if (currentLine !== "") {
          labelElements.push(currentLine);
        }

        return labelElements;
      },
      // 新增：动态设置字体大小
      style: function({ seriesIndex, dataPointIndex, w }) {
        // 获取当前数据点的数值
        const dataValue = w.globals.series[seriesIndex].data[dataPointIndex];
        // 根据数值范围设置字体大小，可自行调整阈值和大小
        let fontSize;
        if (dataValue > 100) {
          fontSize = 18;
        } else if (dataValue > 50) {
          fontSize = 14;
        } else {
          fontSize = 10;
        }
        return {
          fontSize: `${fontSize}px`,
          color: '#333'
        };
      }
    },
  };

补充说明 #

• 若需要更平滑的字体变化效果，可使用线性计算替代区间判断：

  // 假设数值范围是0-200，对应字体大小10-20px
  const minValue = 0;
  const maxValue = 200;
  const minFontSize = 10;
  const maxFontSize = 20;
  const fontSize = minFontSize + ((dataValue - minValue) / (maxValue - minValue)) * (maxFontSize - minFontSize);
  

• 移除全局fontSize配置，避免覆盖动态设置的样式。

内容的提问来源于stack exchange，提问作者Thalika Janse Van Vuuren