Javascript 使用Vue js绑定到动态图LegendFormatter中的方法

我正在尝试将动态图与Vuejs相结合。有一个不完整的npm包，但它看起来被废弃了，我无法使它工作，所以我为折线图编写了自己的组件：

<template>
<div class="linechart">
            <md-card>
                <md-card-header>
                    <div class="md-title">{{ title }}</div>
                </md-card-header>
                <md-card-content>
                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-size-100">
                            <div style="width:100%;" :id="id"></div>
                        </div>                        
                    </div>
                </md-card-content>
                <md-card-actions>
                    <div class="legend">
                        <div :id="legendId"></div>
                    </div>
                </md-card-actions>
            </md-card>
</div>
</template>

<script>
import Dygraph from 'dygraphs'
import 'dygraphs/dist/dygraph.css'


export default {
    name: 'Linechart',
    props: ['data', 'options', 'id', 'title'],
    data() {
        return {
            detailSerie: ''
        }
    },
    computed: {
        legendId() {
            return this.id + '_legend';
        }
    },
    methods: {
        click() {
            // click
        }
    },
    mounted: function() {
        // concat label div to options
        let localOptions = {...this.options, 
            labelsDiv: document.getElementById(this.legendId), 
            legendFormatter: legendFormatter

            };
        new Dygraph(
            // containing div
            document.getElementById(this.id),
            this.data,
            localOptions
            );
        }
}

function showDetail(seriesName) {
    console.log(seriesName);
}

function legendFormatter(data) {
  if (data.x == null) {
    // This happens when there's no selection and {legend: 'always'} is set.
    var html_blank = '';
    data.series.forEach(series => {
        html_blank += '<button href="#" onclick="showDetail(' + series.labelHTML + ')" class="md-button" style="text-align:center; vertical-align:bottom;color:' + series.color + ';">' + series.labelHTML + ' </button>';
    });
    return html_blank;
  }

  var html ='<span class="md-button">' + this.getLabels()[0] + ': ' + data.xHTML+'</span>';
  data.series.forEach(function(series) {
    if (!series.isVisible) return;
    var labeledData;
    if (series.isHighlighted) {
        labeledData = '<span class="md-button" style="text-decoration: underline; text-decoration-style:double; color:' + series.color + ';">'+ series.labelHTML + ': ' + series.yHTML+"</span>";
    }
    else
    {
        labeledData = '<span class="md-button" style="color:' + series.color + ';">'+ series.labelHTML + ': ' + series.yHTML+"</span>";
    }
    html += ' ' + labeledData;
  });
  return html;
  }
</script>

<style>
.legend {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    vertical-align: bottom;
}
.dygraph-xlabel {
    display: flex;
    justify-content: center;
}

.linechart {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>

{{title}}
从“动态图”导入动态图
导入“dygraphs/dist/dygraph.css”
导出默认值{
名称：'折线图'，
道具：['data'，'options'，'id'，'title']，
数据（）{
返回{
详细信息系列：“”
}
},
计算：{
legendId（）{
返回此.id+“_legend”；
}
},
方法：{
单击（）{
//点击
}
},
挂载：函数（）{
//concat标签div到选项
让localOptions={…this.options，
labelsDiv:document.getElementById（this.legendId），
legendFormatter:legendFormatter
};
新动态记录仪(
//包含div
document.getElementById（this.id），
这个数据,，
本地选项
);
}
}
函数showDetail（系列名称）{
console.log（seriesName）；
}
函数legendFormatter（数据）{
if（data.x==null）{
//当没有选择并且设置了{legend:'always'}时，就会发生这种情况。
var html_blank=''；
data.series.forEach（series=>{
html_blank+=''+series.labelHTML+''；
});
返回html_空白；
}
var html=''+this.getLabels（）[0]+'：'+data.xHTML+''；
数据系列forEach（函数系列）{
如果（！series.isVisible）返回；
labeledData变种；
if（系列灯光）{
labeledData=''+series.labelHTML+'：''+series.yHTML+''；
}
其他的
{
labeledData=''+series.labelHTML+'：''+series.yHTML+''；
}
html+=''+标签数据；
});
返回html；
}
.传奇{
显示器：flex；
证明内容：中心；
边缘顶部：15px；
垂直对齐：底部对齐；
}
.dygraph xlabel{
显示器：flex；
证明内容：中心；
}
.线条图{
边缘顶部：10px；
左边距：10px；
右边距：10px；
}

它使用道具获取系列数据、标题和少量其他参数作为输入，并绘制图表。我需要一个自定义的图例，所以我给了一个自定义的图例格式化程序功能。该函数的作用是，如果任何序列未被光标聚焦，它将显示带有序列名称和颜色的按钮，以便用户可以单击打开该序列的详细图表：

如果正在跟踪任何系列，它将显示带有所选系列双下划线的点详细信息：

到目前为止还不错。问题是，由于动态图自定义格式化程序基本上是一个html片段，因此我无法在其中进行任何函数绑定。以下各项均无效：

        html_blank += '<button href="#" onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...
        html_blank += '<button href="#" @onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...
        html_blank += '<button href="#" v-on:onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...

---

html\u blank+='您可以随时放弃内置的动态图图例，并滚动自己的动态图。我对React比对Vue更为熟悉，但我想您可以在每次调用
legendFormatter
时更新应用程序状态，以在Vue中呈现您自己的图例。您可以随时放弃内置的动态图图例并滚动自己的图例。我对React比对Vue更熟悉，但我想您可以在每次调用
legendFormatter
时更新应用程序状态，以便在Vue中呈现您自己的传奇。