javascript - Chartist.js 在 vue.js 中显示工具提示

Question

我正在从事一个图表师元素，我正在尝试展示工具。我在这上面花了一整天，但似乎无法理解。主要问题出在 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>

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

Answer 1

我刚刚遇到了同样的问题，经过一些研究，我最终得到了这个:

--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;
  }