vue-chartjs и пользовательская легенда с использованием generateLegend ()

Question

Оболочка generateLegend () действительно вызывает legendCallback, определенный в моем коде Vue, но я заблудился из-за того, как визуализировать пользовательский HTML в vue-chartjs. Что мне делать с htmlLegend, как описано в документации vue-chartjs, например здесь .

Вот компонент линейной диаграммы, который я пытаюсь отобразить с помощью пользовательского объекта HTML.

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['chartData','options'],
  data: () => ({
    htmlLegend: null
  }),
  mounted () {
    this.renderChart(this.chartData, this.options);
    this.htmlLegend = this.generateLegend();
  }
}

Вот мой шаблон Vue

<template>
            <div class="col-8">
                <line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
            </div>
</template>

Answer 1

Ну, htmlLegend содержит разметку сгенерированной легенды ... так что вы можете просто поместить ее в свой тег с помощью v-html

<template>
  <div class="col-8">
    <div class="your-legend" v-html="htmlLegend" />
    <line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
  </div>
</template>