Question

我很难解决这个问题。我在获取请求后获取数据，打开开发人员工具或调整浏览器大小后显示数据。我已经尝试了一些延迟或超时解决方案，但遗憾的是无法使其工作。我需要最快的解决方案，即使它是一种“肮脏的黑客”解决方案。我正在使用vue 2.9.1和chartjs-vue 2.7.1。谢谢！这是我的代码：

import {Line} from 'vue-chartjs'

export default { 
  name: 'Events', 
  extends: Line,
  created: function () {
    this.getEvents();
        },
  data () {
    return {
      gradient: null,
      gradient2: null,
      datesList : [],
      avgList: []
    }
  },
  methods:{

    graphClickEvent(event, array){
      var points = this.getElementAtEvent(event)
      },
       getEvents () {
            this.$http.get('http://localhost:8081/users/getAllEvents'
             ,{headers: {'Content-Type': 'application/json',
              'Authorization': localStorage.getItem('token'),}
            }).then((res) => {
              // res.body = array of event object
              var eventsArr = res.body;
                var arrayLength = eventsArr.length;
                for (var i = 0; i < arrayLength; i++) {
                  var date = new Date(parseInt(eventsArr[i].startTime))
                  var day = date.getDate()
                  var month =  date.getMonth()
                  var year = date.getFullYear()
                  var hours = date.getHours()
                  hours = ("0" + hours).slice(-2);
                  var minutes = date.getMinutes()
                  minutes = ("0" + minutes).slice(-2);
                  var str = day;
                  var str = day + "." + (month + 1) + "." + year +" - " + hours + ":" + minutes
                    this.datesList.push(str);
                }
                for (var i = 0; i < arrayLength; i++) {
                    var evnt = eventsArr[i];
                  this.avgList.push({label: evnt.name,y: evnt.pulseAverage ,tag: evnt.tag, id: evnt.id });
                }
            })
        }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)

    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
    
    this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
    this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.35)');
    this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');


    this.renderChart({
      labels: this.datesList,
      datasets: [
        {
          label: 'Events',
          borderColor: '#05CBE1',
          pointBackgroundColor: 'white',
          pointBorderColor: 'white',
          borderWidth: 2,
          backgroundColor: this.gradient2,
          data: this.avgList
         },
      ]
    ,
     options: {
        scales: {
            xAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
  }
     
    //
     ,{ onClick: function(event){
      var activePoints = this.getElementAtEvent(event)
       var firstPoint = activePoints[0];
  if(firstPoint !== undefined){
    var label = this.data.labels[firstPoint._index];
    var value = this.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    var location = "eventGraph?id=" + value.id;
    window.location.href = location;
    }
       }
      , responsive: true, maintainAspectRatio: false,fontColor: '#66226',
    tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                   title: function(tooltipItems, data) {
                    var evnt = data.datasets[0].data[tooltipItems[0].index].label;
                    return evnt
                  },
                    label: function(tooltipItems, data) { 
                       var avg = 'Average heart: ' + [tooltipItems.yLabel];
                       var evnt = 'Type: ' + data.datasets[0].data[tooltipItems.index].tag;
                        return [avg,evnt];
                    }
                }
            }
          })
}
}

Answer 1

这听起来像是一个初始化问题，其中图表最初是在一个不可见的元素中呈现的，或者它无法确定父元素的大小。

我在Google上看到了类似的问题：

有人建议在一切都可见时进行图表刷新：

setTimeout(function() { myChart.update(); },1000);

在vue中考虑这可以在mount函数中完成。

我确信有一种更优雅的方式可以使用手表功能或类似的东西来处理这个问题。

更新：

正如评论中所提到的，我已经看到了人们使用以下方式手动触发窗口调整大小事件的参考：

window.dispatchEvent(new Event('resize'));

我认为它可能适用于vue组件的挂载功能：

export default {
    name: 'graphs-component',
    mounted: function(){
         window.dispatchEvent(new Event('resize'));
    }
}

您甚至可以将其包装在setTimeout中以确保所有内容都已加载。

只有在调整浏览器大小或打开开发人员工具后，才会在chartjs-vue上显示数据

1 个答案: