0

Olá, estou criando um componente em Vue.js para gerar um grupo de gráficos dinâmicos, os valores ainda estão estáticos, pois ainda estou moldando.

O atual problema, é quero conseguir atualizar um <span> externo no momento que passar o mouse sobre o valor, eu não estou conseguido achar isso na documentação. então gostaria de uma ajuda para isso.

A baixo segue o componente:

DashboardSmallGraph.vue

<template>
    <div class="row">
        <div v-for="(item, i) in array" v-bind:key="i" class="col-sm-6 col-md-3">
            <div class="card">
            <div class="card-header border-0 pb-1">
                <div class="d-flex justify-content-between">
                <h3 class="card-title"><b>{{ item.nome }}</b></h3>
                <a v-bind:href="item.url"><strong><i alt="Detalhes" class=" text-muted fas fa-info-circle"></i></strong></a>
                </div>
            </div>
            <div class="card-body pt-2">
                <div class="d-flex">
                <p class="d-flex flex-column">
                    <span id="" class="text-bold text-lg">R$ {{ item.valor }}</span>                    
                </p>
                <p class="ml-auto d-flex flex-column text-right">
                    <rendmento-arrow v-bind:rendimento='item.rendimento' ></rendmento-arrow>                                        
                </p>
                </div>
                <!-- /.d-flex -->
                <div class="position-relative ">                
                <vue-canvas></vue-canvas>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
    // Arrow
    Vue.component('rendmento-arrow', {
        props: ['rendimento'],
        template:   '<span v-bind:class="checkRendimentoMes.color">'+
                        '<i v-bind:class="checkRendimentoMes.arrow"></i> {{ rendimento }}%'+
                    '</span>',
        computed: {
            checkRendimentoMes: function (){
                var r = Array;
                if(this.rendimento >= 0){
                   r['arrow'] = 'fas fa-arrow-up';
                   r['color'] = 'text-success';

                }else{
                   r['arrow'] = 'fas fa-arrow-down';  
                   r['color'] = 'text-danger';
                }
               return r;
            }
        }
    });

    // CANVAS to chart    
    Vue.component('vue-canvas', {
        template: ' <canvas id="myChart" height="180"></canvas>',

        methods: {
            draw: function (ctx) {
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['1', '2', '3', '5', '6', '7'],
                        datasets: [{                            
                            data: ['300.00', '190.00', '300.00', '500.00', '200.00', '300.00'],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)'                                
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)'                               
                            ],
                            borderWidth: 2
                        }]
                    },
                    options: {
                        legend: {
                            display: false,                           
                        },
                        responsive: true,
                        title: {
                            display: false,                            
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                gridLines: {
                                    display:false
                                }
                            }],
                            yAxes: [{
                                gridLines: {
                                    display:false
                                }   
                            }]
                        },
                        elements:{
                            point:{
                                radius: 0
                            }
                        },
                        events: ['mousemove']                        
                    }
                })
            }
        },
        mounted: function() {
            var c = document.getElementById("myChart");
            var ctx = c.getContext("2d");
            ctx.translate(0.5, 0.5);
            ctx.imageSmoothingEnabled = false;
            this.draw(ctx);
        }
    });
    // default
    export default {       
        mounted() {
            console.log('dashboard')
        },
        data: function () {
            return {
                array: [
                    {
                        valor: '3.123,94',
                        nome: 'corretora',
                        rendimento: '-1.3',
                        url: '#',
                        chart: 'myChart'
                    }
                ]
            }
        }       
    }


</script>

Meu objetivo e atualizar o spam aonde carrega o valor no momento que eu passar o mouse no ponto especifico do dia.

exemplo

3
  • 1
    Existe uma integração entra o Charts.js e Vue.js chamada vue-chartjs que pode facilitar sua vida. No mais tem algo estranho no seu código, você usa um arquivo .vue para criar um Single File Component, porém nesse arquivo são criados 3 componentes? Mesmo que funcione não faz muito sentido. Commented 21/10/2019 às 20:32
  • 1
    Fora isso você precisa fazer o componente pai se comunicar com o componente <vue-canvas>... O mais interessante é você passar por props os dados ao componente filho e atualizar o gráfico cada vez que mudar o valor dos props... Dê uma olhada em Watchers e no atributo ref para evitar o document.getElementByID Commented 21/10/2019 às 20:38
  • @fernandosavio no caso eu só separei ele em partes para trabalhar melhor, o meu problema e no ponto primário, eu não to sabendo como pegar essa informação do chart.js para poder trabalhar em cima dela.
    – Bulfaitelo
    Commented 21/10/2019 às 20:40

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .