使用UMD模式时修改vue-chartjs柱状图配置项问题

问题核心原因 #

你遇到的网格、图例、坐标轴标签配置失效，主要是两个问题导致：

1. 传入的xLabel/yLabel未绑定到图表配置中，导致坐标轴标签无法显示
2. Chart.js版本不兼容：你当前引入的是最新版Chart.js（v3+），但vue-chartjs@3.5.1仅适配Chart.js v2.x，版本不匹配会让旧版配置结构失效

分步解决方案 #

1. 修正Chart.js版本引用 #

将Chart.js的CDN链接替换为与vue-chartjs兼容的v2.9.4版本：

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/chart.min.js"></script>

2. 完善组件配置逻辑 #

修改chart-component的配置项，把props中的坐标轴标签绑定到options，同时确保网格线、图例配置正确生效：

Vue.component('chart-component', {
  extends: VueChartJs.Bar,
  props: ['data', 'labels', 'title', 'xLabel', 'yLabel', 'barColor', 'lineColor', 'barWidth'],
  data() {
        return {
            options: {
                scales: {
                    yAxes: [{
                        ticks: { beginAtZero: true },
                        gridLines: { display: false }, // 隐藏Y轴网格线
                        scaleLabel: {
                            display: true,
                            labelString: this.yLabel // 绑定Y轴标签
                        }
                    }],
                    xAxes: [{
                        gridLines: { display: false }, // 隐藏X轴网格线
                        scaleLabel: {
                            display: true,
                            labelString: this.xLabel // 绑定X轴标签
                        }
                    }]
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: { fontColor: '#424242' } // 自定义图例文字颜色
                },
                responsive: true,
                maintainAspectRatio: false
            }
        }
    },
  mounted() {
    this.renderChart({
      labels: this.labels,
      datasets: [
        {
          type: 'bar',
          label: this.title,
          data: this.data,
          backgroundColor: this.barColor,
          barPercentage: this.barWidth
        },
        {
          type: 'line',
          label: 'Tendance',
          data: this.data.map(d => d * 1.1),
          borderColor: this.lineColor,
          fill: false,
          tension: 0.1 // 让折线更平滑
        }
      ]
    }, 
    this.options);
  }
});

3. 给图表容器添加固定高度 #

因为开启了maintainAspectRatio: false，需要给组件容器设置高度，否则图表可能显示异常：

.chart-container {
  height: 400px;
  padding: 20px;
}

然后在使用组件时包裹容器：

<div class="chart-container" v-for="(dataset, index) in chartData" :key="index">
  <chart-component 
    :data="dataset.values.map(item => item.value)" 
    :labels="dataset.values.map(item => item.mois)" 
    :title="dataset.title"
    :xLabel="dataset.xLabel"
    :yLabel="dataset.yLabel"
    :barColor="dataset.barColor"
    :lineColor="dataset.lineColor"
    :barWidth="dataset.barWidth">
  </chart-component>
</div>

完整修改后的代码 #

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
          rel="stylesheet"
    />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css"
          rel="stylesheet"
    />
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
          rel="stylesheet"
    />

    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <style>
      * {
        word-break: normal !important;
      }
      .chart-container {
        height: 400px;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="chart-container" v-for="(dataset, index) in chartData" :key="index">
        <chart-component 
          :data="dataset.values.map(item => item.value)" 
          :labels="dataset.values.map(item => item.mois)" 
          :title="dataset.title"
          :xLabel="dataset.xLabel"
          :yLabel="dataset.yLabel"
          :barColor="dataset.barColor"
          :lineColor="dataset.lineColor"
          :barWidth="dataset.barWidth">
        </chart-component>
      </div>
    </div>
  </body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-chartjs@3.5.1/dist/vue-chartjs.min.js"></script>

<script>
Vue.component('chart-component', {
  extends: VueChartJs.Bar,
  props: ['data', 'labels', 'title', 'xLabel', 'yLabel', 'barColor', 'lineColor', 'barWidth'],
  data() {
        return {
            options: {
                scales: {
                    yAxes: [{
                        ticks: { beginAtZero: true },
                        gridLines: { display: false },
                        scaleLabel: {
                            display: true,
                            labelString: this.yLabel
                        }
                    }],
                    xAxes: [{
                        gridLines: { display: false },
                        scaleLabel: {
                            display: true,
                            labelString: this.xLabel
                        }
                    }]
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: { fontColor: '#424242' }
                },
                responsive: true,
                maintainAspectRatio: false
            }
        }
    },
  mounted() {
    this.renderChart({
      labels: this.labels,
      datasets: [
        {
          type: 'bar',
          label: this.title,
          data: this.data,
          backgroundColor: this.barColor,
          barPercentage: this.barWidth
        },
        {
          type: 'line',
          label: 'Tendance',
          data: this.data.map(d => d * 1.1),
          borderColor: this.lineColor,
          fill: false,
          tension: 0.1
        }
      ]
    }, 
    this.options);
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      chartData: [
        {
          title: "Ventes Mensuelles",
          values: [
            { mois: "Janvier", value: 1 },
            { mois: "Février", value: 2 },
            { mois: "Mars", value: 3 },
            { mois: "Avril", value: 4 },
            { mois: "Mai", value: 5 },
            { mois: "Juin", value: 6 },
            { mois: "Juillet", value: 7 },
            { mois: "Août", value: 8 },
            { mois: "Septembre", value: 9 },
            { mois: "Octobre", value: 1 },
            { mois: "Novembre", value: 1 },
            { mois: "Décembre", value: 1 }
          ],
          xLabel: "Mois",
          yLabel: "Ventes (€)",
          barColor: 'rgba(54, 162, 235, 0.5)',
          lineColor: 'rgba(255, 99, 132, 1)',
          barWidth: 0.6
        }
      ]
    };
  }
});
</script>
</html>

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