带有 Vue 的 Chartjs，条形图边框半径不起作用

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

带有 Vue 的 Chartjs，条形图边框半径不起作用

Chartjs with Vue, Bar Chart Border Radius not working

javascript

vue.js

chart.js

vue-chartjs