Javascript Chartist.js在vue.js中显示工具提示

我正在做一个图表专家项目，我正在尝试显示工具。我花了一整天的时间在这上面，似乎无法得到它。主要问题在于Chartist.plugins.tooltip方法，它在屏幕上根本不做任何事情。我想知道这是否是一个css问题，可以在下面的样式中看到。此外，我尝试了许多NPM软件包，但似乎没有任何效果。任何帮助都会很好。代码如下：

<template>
<div>
    <VueChartist
        type="Line"
        :data="data"
        :options="options" >
    </VueChartist>
</div>
</template>

<script>
import VueChartist from 'v-chartist';
import Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-axistitle';
import ChartistTooltip from 'chartist-plugin-tooltips-updated';


export default {
    name: "ChartTwo",
    components: {
        'VueChartist': VueChartist
    },
    data() {
        return {
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                series: [
                    [2, 3, 2, 4, 5],
                    [4, 2.5, 3, 2, 1],
                    [1, 2, 2.5, 3.5, 4]
            ]
        },
            options: {
                width: 600,
                height: 600,
                high: 5,
                low: 1,
                // divisor: 2,
                ticks: ['One', 'Two', 'Three'],
                plugins: [
                    Chartist.plugins.ctAxisTitle({
                        axisX: {
                            axisTitle: "Days of the Week",
                            offset: {
                                x: 10,
                                y: 30
                            },
                            scaleMinSpace: 2,
                            labelInterpolationFnc: function(value, index) {
                               return index % 2 === 0 ? value : null;
                            },
                        },
                        axisY: {
                            axisTitle: "Grades",
                        }
                    }),
                     Chartist.plugins.tooltip()
                ]//End of plugins

            }//End of options 
         }
      }// End of Data object 
   }//End of Vue Instance 
 </script>

  <style>
    .ct-series-a .ct-line {
       /* Set the colour of this series line */
       stroke: blue;
       /* Control the thickness of your lines */
       stroke-width: 5px;
      /* Create a dashed line with a pattern */
      stroke-dasharray: 10px 20px;
    }

        .chartist-tooltip {
           opacity: 0;
           position: absolute;
           margin: 20px 0 0 10px;
           background: rgba(0, 0, 0, 0.8);
           color: #FFF;
           padding: 5px 10px;
           border-radius: 4px;
       }

      .chartist-tooltip.tooltip-show {
         opacity: 1;
      }

      .ct-chart .ct-bar {
        stroke-width: 40px;
      }
   </style>

从“v-ChartList”导入VueChartist；
从“图表列表”导入图表列表；
从'ChartList plugin axistitle'导入*作为MyLegend；
从“图表列表插件工具提示更新”导入图表列表工具提示；
导出默认值{
姓名：“查特二号”，
组成部分：{
“VueChartist”：VueChartist
},
数据（）{
返回{
数据：{
标签：[1,2,3,4,5,6,7,8,9,10]，
系列：[
[2, 3, 2, 4, 5],
[4, 2.5, 3, 2, 1],
[1, 2, 2.5, 3.5, 4]
]
},
选项：{
宽度：600，
身高：600，
高:5,，
低:1,，
//除数：2，
记号：['1'，'2'，'3']，
插件：[
Chartist.plugins.ctAxisTitle({
axisX：{
标题：“一周中的几天”，
偏移量：{
x:10，
y:30
},
尺度空间：2，
labelInterpolationFnc：函数（值、索引）{
返回索引%2==0？值：null；
},
},
axisY：{
标题:"职系",，
}
}),
charlist.plugins.tooltip（）
]//插件结束
}//期权结束
}
}//数据对象结束
}//Vue实例结束
.ct-series-a.ct生产线{
/*设置此系列线的颜色*/
笔画：蓝色；
/*控制线条的粗细*/
笔画宽度：5px；
/*创建带有图案的虚线*/
行程阵列：10px 20px；
}
.图表提示{
不透明度：0；
位置：绝对位置；
利润率：20px 0 10px；
背景：rgba（0,0,0,0.8）；
颜色：#FFF；
填充物：5px10px；
边界半径：4px；
}
.chartip-tooltip.tooltip-show{
不透明度：1；
}
.ct图表.ct条{
笔划宽度：40px；
}

---

我想要的是当我将鼠标悬停在工具提示中的某个点上时，屏幕上显示的标签和序列。我知道，这是可以做到的，但一个下午阅读文档，我几乎没有取得进展。再说一次，任何帮助都会很好

我刚刚遇到了同样的问题，经过几次研究，我最终得出以下结论：

--Instalation
    npm i chartist-plugin-tooltips
--import
    import Vue from 'vue'
    import 'chartist/dist/chartist.min.css'
    import * as ChartistTooltips from 'chartist-plugin-tooltips';

    Vue.use(require('vue-chartist'), {
        messageNoData: "You have not enough data",
        classNoData: "empty"
    })
--On component
plugins: [
            this.$chartist.plugins.tooltip({
              anchorToPoint:true,
              appendToBody: true
            })
          ]
--CSS for better looks and show only on hover
.chartist-tooltip {
    position: absolute;
    display: none;
    min-width: 5em;
    padding: 8px 10px;
    background: #383838;
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s linear;
  }

  .chartist-tooltip:before {
    position: absolute;
    bottom: -14px;
    left: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: rgba(251, 249, 228, 0);
    border-top-color: #383838;
    border-width: 7px;
    margin-left: -8px;
  }

  .chartist-tooltip.tooltip-show {
      display: inline-block !important;
  }