在图表上左右滑动会出现数据错乱的问题

[huangche007]

这里有一个tab，当我从一月切换到三月，然后左右滑动的时候，发现三月显示的数据会出现错乱(会显示一月的时候)
我录制了一份gif图，大佬们可以看看.
效果图

[apertureless]

Hey @huangche007
sorry I don't really understand the issue :o

[huangche007]

@apertureless I mean, when the left and right slides, the data of the X axis and the Y axis will be deranged

[apertureless]

Hm, can you post some reproduction? (jsfiddle, codepen, minimal repository) It never happend for me tho.

[huangche007]

you can access to http://m.ciyigou.com/mobile/#/pricedetail/10230，when you switch to March,and move right and left,the data of the X axis and the Y axis will be deranged

[apertureless]

How your tabs are working? With v-if ?
Looks like the chart instance isn't destroyed properly and the charts are overlapping.

Are you using the current version?

[huangche007]

some code as follow:

<div class="sort" id="sort">
        <div class="col-xs-3 col on">一月</div>
        <div class="col-xs-3 col">三月</div>
        <div class="col-xs-3 col">半年</div>
        <div class="col-xs-3 col">一年</div>
      </div>

$('#sort .col').click(function(event) {
        $(this).addClass('on').siblings().removeClass('on');
        switch ($(this).html()){
          case "一月":
            _this.month = "1";
              break;
          case "三月":
            _this.month = "3";
            break;
          case "半年":
            _this.month = "6";
            break;
          case "一年":
            _this.month = "12";
            break;
        }
        _this.getMonthMoreData(_this.month,_this.mPriceData.name,_this.mPriceData.specifications);
      });

[apertureless]

Okay, I understand. And then after getMonthMoreData() is called, you re re-rendering the chart?
Do you re-create the whole chart instance / chart-component ?

[huangche007]

i just re-rendering the chart

[huangche007]

How can i re-create the whole chart-component？

[huangche007]

@apertureless Thank you very much，I solved this problem like this:

import {Line} from 'vue-chartjs'
export default {
  extends: Line,
  props: ['chartData', 'options'],
  mounted () {

    this.renderChart(this.chartData, this.options)
  },
  watch: {
    options () {
      this._chart.destroy();
      this.renderChart(this.chartData, this.options);
    },
    chartData () {
      this._chart.destroy();
      console.log("或得到的监视数据chartData:",this.chartData);
      this.renderChart(this.chartData, this.options);
    }
  }
}

this._chart.destroy(); //this code is every important