Chart.js图表尺寸适配与标签位置放置问题求助

图表尺寸异常解决方法 #

• 为chart对应的canvas元素外层添加一个固定宽高的父容器，避免父容器尺寸随内容自适应变动
• 初始化Chart实例时，在配置项中添加如下参数，关闭默认的宽高比强制约束，让图表完全适配父容器尺寸：

const chart = new Chart(ctx, {
  // 其余配置
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
})

标签位置异常解决方法 #

根据你要调整的标签类型选择对应配置即可：

• 调整图例位置：在options.plugins.legend字段中设置position参数，可选值有top/left/right/bottom，也可搭配padding参数调整图例与图表主体的间距
• 调整坐标轴标签位置：在对应坐标轴的配置项下修改ticks的align、padding参数，示例如下：

options: {
  scales: {
    x: {
      ticks: {
        align: 'center',
        padding: 10
      }
    }
  }
}

• 调整条形/折线图的数据标签位置：引入chartjs-plugin-datalabels插件后，在插件配置中通过anchor、align、offset三个参数调整位置，如需让数据标签显示在条形顶部外侧，配置如下：

options: {
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'top',
      offset: 4
    }
  }
}

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