Vue 統計グラフの時系列とトレンド フィッティングの最適化

npm install vue
npm install vue-chartjs

<div id="app">
  <line-chart :data="chartData"></line-chart>
</div>

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
})

new Vue({
  el: '#app',
  data: {
    chartData: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      datasets: [
        {
          label: '销售额',
          backgroundColor: '#f87979',
          data: [100, 200, 150, 250, 300, 200]
        }
      ]
    }
  }
})

npm install mathjs

import math from 'mathjs'

methods: {
  fitTrend () {
    const salesData = this.chartData.datasets[0].data
    const trend = math.regress(salesData.map((_, i) => [i]), salesData, 1).equation
    const optimizedSalesData = salesData.map((_, i) => trend[0] + trend[1] * i)
    
    this.chartData.datasets.push({
      label: '拟合趋势',
      backgroundColor: '#bababa',
      data: optimizedSalesData
    })
    this.updateChart()
  },
  updateChart () {
    this.$refs.chart.destroy()
    this.renderChart(this.chartData, this.options)
  }
}

<button @click="fitTrend">拟合趋势并优化</button>