chart.js提供给开发者的配置项较少,往外暴露的自定义接口也较少。我在开发中发现图例与图表的距离是个固定值10像素不可更改,然后在研究chart.js的源代码发现了更改方法。

chartjs

  1. 下载chart.bundle.js

  2. 定位到16159行

  3. 如果你的图例的水平排列,则改高。如果是垂直排列则改宽

if (isHorizontal) {
        minSize.width = me.maxWidth; // fill all the width
        // 水平状态时图例到图表的距离,默认10px
        minSize.height = display ? 20 : 0;
      } else {
        // 垂直状态时图例到图表的距离,默认10px
        minSize.width = display ? 10 : 0;
        minSize.height = me.maxHeight; // fill all the height
      }