如何从 vuejs3 动态添加数据到 primevue 折线图？

Question

我正在尝试使用 primevue 折线图制作实时图表，如下所述：

https://www.primefaces.org/primevue/showcase/#/chart/line

起初我用数据和选项属性声明了图表标签：

<Chart type="line" :data="basicData" :options="basicOptions"/>

然后我在数据return脚本中声明对象：

import Chart from 'primevue/chart'

export default {
  name: 'Chart Test',
  components: {
    Chart
  },
  data () {
    return {
      basicData: {
        labels: ['0', '10', '20', '30', '40', '50', '60'],
        datasets: [
          {
            label: 'Speed',
            data: [0],
            fill: false,
            borderColor: '#42A5F5',
            tension: 0
          }
        ]
      },
      basicOptions: {
        plugins: {
          legend: {
            labels: {
              color: '#495057'
            }
          }
        },
        scales: {
          x: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          },
          y: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          }
        }
      }
    }
  }

现在我想通过调用如下方法动态添加数据：

    methods: {
        addData () {
            // update data from Chart here dynamically
        }
    }

我该怎么做？我在互联网上的任何地方都找不到此信息。

更新：接受的答案解决了我的问题。谢谢

Answer 1

Chart.js docs表示可以将新数据推送到图表的data.datasets[]和data.labels属性中，然后调用chart.update():

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

PrimeVue 的 Chart 组件公开了底层 Chart.js instance via chart，因此您可以使用那个属性更新图表：

在 Chart 组件上应用 template ref：

<Chart ref="primeChart">

import { ref } from 'vue'

export default {
  setup() {
    const primeChart = ref()
    // chart.js instance is now available via primeChart.value.chart

    return {
      primeChart,
    }
  }
}

Return 来自 setup() 的图表数据（即，使用 Composition API 以避免使绑定数组数据反应）。 这是避免修改图表数据时出现 Maximum call stack size exceeded 错误所必需的。
```
export default {
  setup() {
    return {
      // non-reactive data
      basicData: {/*...*/},
      basicOptions: {/*...*/},
    }
  }
}
```

创建一个 addData 方法来更新 chart.js 实例（通过模板引用），遵循上面 Chart.js 文档中的示例：

export default {
  setup() {
    const primeChart = ref()

    const addData = () => {
      const chart = primeChart.value.chart
      chart.data.labels.push(/* NEW DATA LABEL */)
      chart.data.datasets[0].data.push(/* NEW DATA VALUE */)
      chart.update()
    }
  }
}

现在您可以使用 addData()（例如，通过单击按钮）用新数据更新图表。

demo

如何从 vuejs3 动态添加数据到 primevue 折线图？

How to add data dynamically to primevue Line chart from vuejs3?

vue.js

chart.js

primevue

vuejs3