vue.js - 如何从 vuejs3 将数据动态添加到 Primevue 折线图？

问题描述

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

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

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

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

然后我在数据返回脚本中声明了对象：

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
        }
    }

我怎样才能做到这一点？我在互联网上的任何地方都没有找到这些信息。

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

标签： vue.jschart.jsvuejs3primevue

Chart.js文档表明您可以将新数据推送到图表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 实例chart，因此您可以使用该属性更新图表：

在组件上应用模板引用Chart：

<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,
    }
  }
}

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

按照上面 Chart.js 文档中的示例，创建一个addData更新 chart.js 实例的方法（通过模板 ref）：

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()（例如，通过单击按钮）用新数据更新图表。

演示

vue.js - 如何从 vuejs3 将数据动态添加到 Primevue 折线图？

问题描述

解决方案

推荐阅读