Блог

Я пытаюсь создать диаграмму в реальном времени с помощью линейного графика 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
        }
    }
 

Как я могу это сделать? Я не нашел этой информации нигде в Интернете.

ОБНОВЛЕНИЕ: Принятый ответ решил мою проблему. Спасибо.

В 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();
}
 

Chart Компонент PrimeVue раскрывает основные Chart.js экземпляр через chart , чтобы вы могли использовать это свойство для обновления диаграммы:

1. Примените ссылку на шаблон к 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,
       }
     }
   }
    

2. Верните данные диаграммы из setup() (т. Е. Используйте API композиции, чтобы избежать реакции связанных данных массива). Это необходимо, чтобы избежать Maximum call stack size exceeded ошибки при изменении данных диаграммы.

    export default {
     setup() {
       return {
         // non-reactive data
         basicData: {/*...*/},
         basicOptions: {/*...*/},
       }
     }
   }
    

3. Создайте 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() (например, нажатием кнопки) для обновления диаграммы новыми данными.

ДЕМОНСТРАЦИЯ