圆角Vue图表js

Question

我正在尝试在vue中的图表js上创建圆条。 我不知道如何使它工作。 谁能帮忙。

我有我的diagram.js，可在其中初始化我的Vue图表。

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

，然后在这样的组件中使用它。在这里，我想为圆棒添加圆角。

  <diagram
                :chart-data="datacollection3"
                :options="{
                  responsive: true,
                    scales:{
                      xAxes: [{
                        stacked: true,
                        barPercetage: 1,
                        gridLines: {
                          color: 'rgba(0, 0, 0, 0)'
                        }
                      }],
                      yAxes: [{
                        position: 'left',
                        id: 'leftSide',
                        stacked: true,
                        gridLines: {
                          color: 'rgba(0, 0, 0, 0)'
                        },
                        ticks: {
                          fontColor: '#C2C8CE',
                          maxTicksLimit: 3,
                          callback: function(value, index, values){
                            return value + '%';

                          }

                        }
                      },
                      {
                        id: 'rightSide',
                        position: 'right',
                        gridLines: {
                          color: 'rgba(0, 0, 0, 0)'
                        },
                        ticks: {
                          fontColor: '#C2C8CE',
                          maxTicksLimit: 2,
                          showGridLines: false,
                          callback: function(value, index, values){
                            return value + 'stk.';
                          }

                        }
                        }]
                    },
                  maintainAspectRatio: false,
                  legend:{display: false}}"
                  :styles="{position: 'relative', color: '#606060', height: '100%'}">
          </diagram>

进行此设置时，我不知道将扩展程序放置在条形图中的位置。