如何自定义标签vue-chart.js

Question

我正在尝试使用vuechartjs自定义折线图 即使您阅读了官方文档，也很难对其进行自定义，因此请帮助我。

我想要结果： enter image description here

我的例子： https://codesandbox.io/s/6l5430r

示例VueChartJS代码：

// 1. Import Chart.js so you can use the global Chart object
import Chart from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'

// 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.LineWithLine = Chart.defaults.line;
// Chart.defaults.global.legend.display = false;
Chart.defaults.global.legend.position = 'top';
Chart.controllers.LineWithLine = Chart.controllers.line.extend({ 
 /* custom magic here */
  draw: () => {
 }
})

// 4. Generate the vue-chartjs component
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

// 5. Extend the CustomLine Component just like you do with the default 
vue-chartjs charts.

export default {
 extends: CustomLine,
 props: ['options'],
 mounted () {
  console.log(this.chartData);
  this.renderChart(this.chartData, this.options)
 }
}