Chartist.js отображение подсказок в vue.js - PullRequest
Новая
       21

Chartist.js отображение подсказок в vue.js

0 голосов
/ 18 декабря 2018

Я работаю над проектом чартистов и пытаюсь отобразить инструменты.Я потратил на это целый день и не могу этого понять.Основная проблема заключается в методе 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>

Что мне нужно, так это чтобы метки и серии отображались на экране, когда я наводил курсор на точку во всплывающей подсказке.Я знаю, что это можно сделать, но днем ​​я читаю документацию, и я едва достиг прогресса.Опять же, любая помощь будет отличной.

1 Ответ

0 голосов
/ 17 апреля 2019

Я только что столкнулся с той же проблемой, и после нескольких исследований я получаю следующее: 

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