如何在Nuxt中导入使用Chart.js v2.9.4自定义插件（适配vue-chartjs）

接入自定义Chart.js插件步骤 #

方案1：单组件注册（仅当前BarChart组件生效）

直接修改components/BarChart.vue文件，代码如下：

<script>
import { Bar, Chart } from "vue-chartjs";

// 粘贴自定义插件代码
const customScalePlugin = {
  id: "customScale",
  beforeLayout: (chart, options, c) => {
    let max = Number.MIN_VALUE;
    let min = Number.MAX_VALUE
    let grace = options.grace || 0

    chart.data.datasets.forEach((dataset) => {
      max = Math.max(max, Math.max(...dataset.data));
      min = Math.min(min, Math.min(...dataset.data))
    })

    if (typeof grace === 'string' && grace.includes('%')) {
      grace = Number(grace.replace('%', '')) / 100
      chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)
    } else if (typeof grace === 'number') {
      chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace
    }
  }
}

// 注册插件到Chart实例
Chart.pluginService.register(customScalePlugin)

export default {
  extends: Bar,
  props: {
    // 修正原prop类型错误，图表数据应为Object类型
    data: {
      type: Object,
      default: () => {},
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.renderChart(this.data, this.options);
  },
};
</script>

方案2：全局注册（项目所有Chart.js图表都可使用）

1. 在plugins目录下新建chartjs.plugins.js，内容如下：

import Chart from 'chart.js'

const customScalePlugin = {
  id: "customScale",
  beforeLayout: (chart, options, c) => {
    let max = Number.MIN_VALUE;
    let min = Number.MAX_VALUE
    let grace = options.grace || 0

    chart.data.datasets.forEach((dataset) => {
      max = Math.max(max, Math.max(...dataset.data));
      min = Math.min(min, Math.min(...dataset.data))
    })

    if (typeof grace === 'string' && grace.includes('%')) {
      grace = Number(grace.replace('%', '')) / 100
      chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)
    } else if (typeof grace === 'number') {
      chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace
    }
  }
}

Chart.pluginService.register(customScalePlugin)

2. 在nuxt.config.js中注册该插件，关闭服务端渲染适配：

export default {
  // 其余原有配置保持不变
  plugins: [
    { src: '~/plugins/chartjs.plugins.js', ssr: false }
  ]
}

配置Grace参数 #

在页面的barChartOptions中添加插件配置，设置你需要的留白值，支持百分比或固定数值：

barChartOptions: {
  responsive: true,
  // 新增插件配置
  plugins: {
    customScale: {
      grace: '20%' // 也可填写数字，比如grace:5代表顶部加5单位的留白
    }
  },
  legend: {
    display: false,
  },
  // 剩余原有配置保持不变
  scales: {
    // ...
  }
}

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