저는 Pinia를 사용하여 vue-chartjs로 데이터를 저장하여 반응형 차트를 만드는 데 능숙하지 않습니다. 이 예를 가이드로 사용하고 있지만 차트가 스토어의 변경 사항에 반응하도록 만드는 데 어려움을 겪고 있습니다.
반응형 양식을 사용하여 다른 구성 요소에서 Pinia 매장 데이터를 변경했는데 매장 데이터가 변경되는 것을 볼 수 있었지만 차트가 업데이트되지 않았습니다.
다음 구성요소를 사용하여 차트를 렌더링하고 있습니다.
<스크립트 설정> 'pinia'에서 { storeToRefs } 가져오기 '@/store/pinia-store-file'에서 { useStore}를 가져옵니다. 수입 { ChartJS로 차트, 카테고리규모, 선형규모, 포인트요소, 라인요소, 제목, 툴팁, 전설 } 'chart.js'에서; 'vue-chartjs'에서 { 라인 } 가져오기; ChartJS.등록( 카테고리규모, 선형규모, 포인트요소, 라인요소, 제목, 툴팁, 전설 ); const store = useStore(); const storeData= storeToRefs(store); const labels = [...Array(storeData.arr.value.length).keys()]; const 데이터 = { 라벨: 라벨, 데이터세트: [ { 라벨: '데이터 원', 배경색상: '#f87979', 데이터: storeData.arr.value } ] } const 옵션 = { 반응형: 사실, 유지AspectRatio: 거짓 } 스크립트> <템플릿> <라인 :data="data" :options="옵션" /> 템플릿>
ref()
에서 store 변수를 래핑하려고 했는데 차트를 다시 렌더링해야 할 것 같습니다. 위의 예시를 피니아 매장 상태에 적용하고, 매장이 변경되면 업데이트하는 작업을 하고 있습니다.
응답에 데이터를 설정하지 않았습니다.계산
을 사용해 보세요.이 코드는 문제를 해결할 수 있습니다:
으아악