Chart.js动态调整折线宽度时如何避免图例尺寸同步增大？

嗨，这个问题我之前也碰到过！确实，直接改borderWidth会同时影响折线和图例标记的粗细，挺烦人的——毕竟咱们只想让折线变粗，图例还是保持原来的大小就好。

其实原因很简单：Chart.js里，数据集的borderWidth属性同时管着折线本身的粗细，以及图例里那条小标记线的粗细。所以咱们得把这俩的控制权分开，不让它们绑在一起。

给你个实用的解决方案，用自定义图例生成函数来固定图例标记的粗细：

1. 初始化图表的时候，在options.legend.labels里加一个generateLabels回调函数，手动指定图例标记的线宽（比如固定为2，你也可以改成自己习惯的默认值）：

var charttest = new Chart(ctx, {
  type: 'line',
  data: { /* 你的数据集内容 */ },
  options: {
    legend: {
      labels: {
        generateLabels: function(chart) {
          return chart.data.datasets.map(function(dataset, index) {
            return {
              text: dataset.label,
              fillStyle: dataset.backgroundColor,
              strokeStyle: dataset.borderColor,
              lineWidth: 2, // 这里固定图例标记的粗细，不受折线borderWidth影响
              hidden: !chart.isDatasetVisible(index),
              index: index
            };
          });
        }
      }
    },
    // 其他图表配置项...
  }
});

2. 你原来的动态调整代码完全可以保留不动，还是正常修改数据集的borderWidth来控制折线粗细：

$(document).on('change', ".line_width", function(e) {
  e.preventDefault();
  picked_width = $(this).val();
  $.each( charttest.config.data.datasets, function( index, value ) {
    charttest.config.data.datasets[index].borderWidth = parseInt(picked_width);
  });
  charttest.update();
});

这样改完之后，不管你把折线调多粗，图例里的小标记都会稳稳保持你设置的固定粗细，完美实现咱们想要的效果！

另外还有个小技巧：如果你想让图例标记的样式和折线更彻底地独立，还能在generateLabels里自定义更多细节，比如标记的长度、颜色深浅之类的，灵活性特别高。

内容来源于stack exchange