在折线图中创建圆角[vue-chart.js]

Question

我渲染了一个折线图，如何使其具有底部边界半径？我的卡片中有折线图，而卡片中的border-radius为6px无padding-bottom，因此折线图停留在底部，我希望图表具有border-radius 6px之类的，该怎么做？

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

  export default {
    extends: Line,
    mixins: [reactiveProp],
    data: () => ({
      options: {
        layout: {
          padding: {
            bottom: -20,
            left: -20,
          }
        },
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              min: 0,
              display: false,
            },
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
          }],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
            ticks: {
              display: false
            }
          }]
        }
      }
    }),
    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)
    }
  }

Answer 1

只需在您的卡类上设置overflow: hidden;。 或者，您可以定位呈现的图表画布本身，并像.card #line-chart { border-radius: 6px; }

那样设置其边框半径

示例：https://codepen.io/mix3d/pen/JjoRKGa