chart.js图例与图表距离更改方法

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

chartjs

  1. 下载chart.bundle.js

  2. 定位到16159行

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

1
2
3
4
5
6
7
8
9
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
}