javascript - 尝试更新图表时我是否正确使用了chart.update()？

Question

我在我的Vue项目中使用chartjs和vuechartjs创建了一个图表。数据将通过 mapGetters 从我的数据库传入。数据将发生变化，并且 yAxes 需要更新，以便刻度最小和最大以及步长需要根据显示的可用数据进行更改。当仅显示最大数据 555 时，我不希望最大值为 2500，步长为 250。我希望它更接近最大值 600，步长为 50。

我阅读了文档，它说使用chart.update()。我正在尝试对此进行测试，但它说无法读取更新。

v-on 处理程序中出现错误:“TypeError:无法读取未定义的属性‘更新’”

这是我的代码。

export default {
    components: {
      BarChart,
      RoiCalculator
    },
    data() {
      return {
        data: [0,0,0,0,0,0,0,0,0,0,0],
        maxFeedback: 0,
        datacollection: null,
        // Configure chart options here
        options: {
          tooltips: { 
            //Allows positioning of the tooltip to the event(mouse) position. Custom is the name of the position 
            //because that is the function created for Chart.Tooltip.positoners
            position : 'custom',    
            callbacks: {
              label: function(tooltipItem, data) {
               var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
               return label;
              }
            }
          },
          maintainAspectRatio: false,  
          legend: {
            //Hides the legend that would normally say NPS scores
            display: false
          },
          // X and Y axes modified here
          scales: {
             // Allows you to customize the X axis
              xAxes: [{
                display: true,
                scaleLabel: {
                display: true,
                labelString: 'Rating',
                },
                gridLines: {
                  display: false,
                  tickMarkLength: 0,
                },
                ticks: {
                    padding: 15,
                    showLabelBackdrop: false
                }
              }],
              // Allows you to customize the Y axis
              yAxes: [{
                gridLines: {
                    tickMarkLength: 0,
                },
                ticks: {
                    padding: 15,
                    max: 500,
                    min: 0,
                    stepSize: 50
                },
              }]
          },
        },
      }
    },
    mounted() {
      this.populateFeedback();

    },
    computed: {

      ...mapGetters({
          filteredFeedback: "initialFeedback"
      }),
    tid: function() {
      return Spark.state.currentTeam.id;
      } ,
    },
    watch: {
      filteredFeedback: {
        handler(){
          this.loadData()
          this.getMaxData()
          this.resizeChart()
        },
      }, 
    }, 
    methods: {
         ...mapActions({
      changeInitialFeedback: "changeInitialFeedback",
    }),
    updateChart(chart){
      this.datacollection.datasets[0].data = [100, 200, 400, 600, 700, 1000, 120, 300, 305, 400, 555];
      this.chartData.update();
    },

    loadData(){
        this.datacollection = {
          labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          datasets: [{
            label: '',
            data: this.sortData(),
            backgroundColor: [
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(242, 74, 99)',
              'rgb(253, 205, 61)',
              'rgb(253, 205, 61)',
              'rgb(9, 198, 117)',
              'rgb(9, 198, 117)',
            ],
          }]
        }
      },
      resizeChart(){
        console.log(this.Chart)
        console.log(this.options.scales.yAxes[0].ticks.stepSize,'options')
        if(!this.maxFeedback <= 0 && !this.maxFeedback >=100){
          this.options.scales.yAxes[0].ticks.max = 100
          this.options.scales.yAxes[0].ticks.stepSize = 10
          }
        else if (this.maxFeedback <= 500){
          this.options.scales.yAxes[0].ticks.max = 500
          this.options.scales.yAxes[0].ticks.stepSize = 50
          }
        else (this.maxFeedback <= 2200)
          this.options.scales.yAxes[0].ticks.max = 2500
          this.options.scales.yAxes[0].ticks.stepSize = 250
      },
      getMaxData(){
        const maxFB = Math.max.apply(Math, this.datacollection.datasets[0].data)
        console.log(maxFB, 'hello')
        this.maxFeedback = maxFB
      },
      sortData(){
        //Filters through all our filtered feedback data and adds them to each rating
        const output=[0,0,0,0,0,0,0,0,0,0,0]
        this.filteredFeedback.forEach(function (e) {
          output[e.nps_rating] += 1
            }
          );
          return output
        },
      populateFeedback() {
      axios
      .get(`/api/metricsPage/all/` + this.tid)
      .then(response => {
        // Filtering out incomplete data
        let filteredFeedback = response.data.feedbacks.filter(feedback => {
          return feedback.nps_icon || feedback.has_comments;
        });
        filteredFeedback = filteredFeedback.map(feedback =>{
          feedback.service_rating = Number(feedback.service_rating);
          feedback.product_rating = Number(feedback.product_rating);
          feedback.delivery_rating = Number(feedback.delivery_rating);
          feedback.nps_rating = Number(feedback.nps_rating);
          return feedback;
        })
        // vuex calls to set global state
        this.changeInitialFeedback({ initialFeedback: filteredFeedback });
      })
      .catch(error => {
        throw error;

      });
  },
  }
}
</script>

<script>

// This file is what exports the chart used in the index
// Imports and determines type of chart (Line, Bar, etc.)
import { Bar } from 'vue-chartjs'
//Creates custom positioning for the positoning of the tooltip.  
Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //<-- custom is now the new option for the tooltip position
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}
export default {
  extends: Bar, 
  props: ['options', 'chartData'],
  data() {
    return{
      chart: this.chartData
    } 
  },
  watch: {
  //Renders the chart 
    chartData(){
      this.renderChart(this.chartData, this.options)
    }
  },
}

</script>

我期待着 Chart.update() 更新，但它一直返回未定义。

Answer 1

您发布的第一个组件引用 this.chartData() ，但是没有 chartData该组件上的属性。您可以通过创建 ref 来强制更新，然后访问this.$refs.<yourref>.update()在您的更新处理程序中。