如何实现截图中提到的水平条形图

Question

我使用chart.js创建了一个简单的水平图表。但我不知道如何创建与截图中提到的相同的图表。我想在条形图中间显示百分比，从结尾显示曲线，在背面显示其全长。我为x轴标签设置了display属性为false，表示没有显示x轴标签。在chart-config文件中，我提到了此图表中使用的颜色“ChartConfig.color.info”。

这是我的代码：

import { HorizontalBar } from 'vue-chartjs'
import { ChartConfig } from "Constants/chart-config";

export default {
   extends: HorizontalBar,
   data: function () {
      return {
         gradient: null,
         options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
               yAxes: [{
                  ticks: {
                     beginAtZero: true,
                     padding: 8
                  },
                  gridLines: {
                     display: true,
                     offsetGridLines: false,
                     drawTicks: false,
                     drawBorder: false
                  },
                  barPercentage: 1.0,
                  categoryPercentage: 0.4
               }],
               xAxes: [{
                  ticks: {
                     beginAtZero: true,
                     display: false
                  },
                  gridLines: {
                     display: false,
                     drawBorder: false
                  }
               }]
            },
            legend: {
               display: false
            }
         }
      }
   },
   mounted() {
      this.gradient = ChartConfig.color.info;

      this.renderChart({
         labels: ['Clothing', 'Gadgets', 'Furniture', 'Wine', 'Toys', 'Nutrition'],
         datasets: [
            {
               label: 'Series A',
               backgroundColor: [this.gradient, this.gradient, this.gradient, this.gradient, this.gradient, this.gradient],
               hoverBackgroundColor: [this.gradient, this.gradient, this.gradient, this.gradient, this.gradient, this.gradient],
               data: [40, 35, 60, 70, 45, 35],
               borderWidth: 1
            }
         ]
      }, this.options)
   }
}