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

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

1 个答案: