javascript - Chartjs 与 Vue，条形图边框半径不起作用

Question

我有一个名为 BarChart.vue 的组件，我正在尝试让 borderRadius 工作，并且我已经尝试了一切让它工作，但它一直很无助。这是代码:

<script>
//Importing Bar class from the vue-chartjs wrapper
import { Bar } from "vue-chartjs";
//Exporting this so it can be used in other components
export default {
  name: "BarChart",
  extends: Bar,
  props: {
    barData: {
      type: Object,
    },
    barThick: {
      type: Number,
    },
  },
  data() {
    return {
      datacollection: {
        //Data to be represented on x-axis
        labels: this.barData.labels,
        datasets: [
          {
            label: "Ranking",
            backgroundColor: "#e5e5e5",
            barThickness: this.barThick,
            maxBarThickness: 20,
            borderWidth: 1,
            borderSkipped: false,
            borderRadius: 10,
            //Data to be represented on y-axis
            data: this.barData.data,
          },
        ],
      },
      //Chart.js options that controls the appearance of the chart
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                fontColor: "black",
                suggestedMax: 100,
              },
              gridLines: {
                display: true,
              },
            },
          ],
          xAxes: [
            {
              ticks: {
                fontSize: 12,
                fontColor: "black",
                fontFamily: "Roboto",
                maxRotation: 90,
                minRotation: 90,
              },
              gridLines: {
                display: false,
              },
            },
          ],
        },
        legend: {
          display: false,
        },
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
  mounted() {
    //renderChart function renders the chart with the datacollection and options object.
    this.renderChart(this.datacollection, this.options);
  },
};
</script>

目前，使用该代码，图表如下所示:

我已经搜索了一整天，但没有找到解决方案。

Answer 1

您正在使用库的 V2，borderradius 仅在库的 V3 中引入，因此您需要更新 Chart.js。尽管 Vue 包装器与 Chart.js V3 不兼容，因此您需要自己实现 Chart.js