Chart.js环形图字体大小不生效及标签换行问题求助

嘿，我来帮你搞定Chart.js环形图的标签问题！看你代码里写的是type: 'bar'，应该是手滑写成柱状图了吧？咱们改成环形图（doughnut或者pie）来调整标签~

你之前没加options配置项，Chart.js根本不知道你要改字体呀！咱们在options里的图例配置里设置字体大小，分两种版本给你参考：

Chart.js v3+ 版本（推荐用新版） #

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut', // 改成环形图
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "United Arab Emirates"],
    datasets: [{
      label: 'Fruits',
      data: [12, 19, 3, 5, 2, 3, 7],
      // 这里可以加背景色、边框色等样式，按需调整
      backgroundColor: ['rgba(255,99,132,0.2)', 'rgba(54,162,235,0.2)', 'rgba(255,206,86,0.2)', 'rgba(75,192,192,0.2)', 'rgba(153,102,255,0.2)', 'rgba(255,159,64,0.2)', 'rgba(102,153,255,0.2)'],
      borderColor: ['rgba(255,99,132,1)', 'rgba(54,162,235,1)', 'rgba(255,206,86,1)', 'rgba(75,192,192,1)', 'rgba(153,102,255,1)', 'rgba(255,159,64,1)', 'rgba(102,153,255,1)'],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          // 这里设置字体大小，数值按需改
          font: {
            size: 14,
            // 还能加字体家族、粗细等
            family: 'Arial',
            weight: 'bold'
          }
        }
      }
    }
  }
});

Chart.js v2 版本（如果还在用旧版） #

旧版的配置结构不一样，字体直接用fontSize：

options: {
  legend: {
    labels: {
      fontSize: 14, // 直接设置字体大小
      fontStyle: 'bold'
    }
  }
}

长标签比如“United Arab Emirates”被截断，有两种简单的解决方法：

方法1：自动换行（Chart.js v3+ 支持） #

开启textWrap并设置最大宽度，超过宽度就自动换行，省心又好用：

options: {
  plugins: {
    legend: {
      labels: {
        textWrap: true,
        maxWidth: 100, // 单位是像素，根据你的图表宽度调整
        font: { size: 14 }
      }
    }
  }
}

方法2：手动强制换行 #

如果想精确控制换行位置，要么直接在labels里加\n，要么用回调函数把空格换成换行符：

// 方式A：直接在labels里加\n
labels: ["Red", "Blue", "United\nArab\nEmirates", "Yellow", "Green", "Purple", "Orange"]

// 方式B：用回调函数自动处理所有长标签
options: {
  plugins: {
    legend: {
      labels: {
        generateLabels: function(chart) {
          return chart.data.labels.map((label, index) => {
            // 把空格替换成\n，实现每个单词换一行
            const wrappedLabel = label.replace(/ /g, '\n');
            return {
              text: wrappedLabel,
              fillStyle: chart.data.datasets[0].backgroundColor[index],
              strokeStyle: chart.data.datasets[0].borderColor[index],
              lineWidth: chart.data.datasets[0].borderWidth
            };
          });
        },
        font: { size: 14 }
      }
    }
  }
}

额外：如果是Tooltip里的标签被截断 #

要是Tooltip里的长标签显示不全，也可以用回调处理：

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          let label = context.label || '';
          // 把空格换成\n，让Tooltip里的标签换行
          label = label.replace(/ /g, '\n');
          return `${label}: ${context.raw}`;
        }
      }
    }
  }
}

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