vue-chartjs 和自定义图例使用 generateLegend()答案

【问题标题】：vue-chartjs and custom legend using generateLegend()vue-chartjs 和自定义图例使用 generateLegend()
【发布时间】：2019-10-10 01:25:30
【问题描述】：

generateLegend() 包装器确实调用了我的 Vue 代码中定义的 legendCallback，但我不知道如何在 vue-chartjs 中呈现自定义 HTML。如here 之类的 vue-chartjs api 文档中所述，我该如何处理 htmlLegend。

这是我尝试使用自定义 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>

【问题讨论】：

标签： vue-chartjs

【解决方案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>

【讨论】：

【解决方案2】：

mounted() {
    this.renderChart( this.chartData , this.options );
    var legend = this.generateLegend();
    this.$emit('sendLegend', legend)
}

然后在vue文件中添加一个新的div来显示图例并监听事件获取图例数据

<div class="line-legend" v-html="chartLegend"></div>
<line-chart @sendLegend="setLegend" :chart-data="datacollection" :options="chartOptions"></line-chart>

并将其添加到数据中

   chartLegend: null,

你还需要一个方法

    setLegend (html) {
        this.chartLegend = html
    },

【讨论】：