Vue Google 차트 사용 - Geochart.데이터 변경 시 차트가 새로고침되지만 범례가 삭제됩니다.

Vue Google 차트 사용 - Geochart.데이터 변경 시 차트가 새로고침되지만 범례가 삭제됩니다.

저는 nuxt 프로젝트에서 vue 구글 차트를 사용하고 있습니다.날짜 선택을 변경하면 데이터가 변환되고 지오차트 구성 요소의 계산된 방법이 올바른 새 데이터를 읽습니다.그러나 맨 아래에 있는 범례(컬러 바)는 제대로 작동하지 않습니다.대신 NaN NaN이라고 써있는데...그 결과 차트는 올바른 데이터를 표시하지만 올바른 색 구분은 표시하지 않습니다.명료성을 위해 첨부한 스크린샷(국가의 마우스는 올바른 데이터를 보여주지만, 색상 매핑이 작동하지 않기 때문에 두 나라는 값이 크게 다르지만 동일한 색조를 보입니다.)

차트를 로드하는 방법은 다음과 같습니다.

<GChart
  :settings="{ packages: ['geochart'], mapsApiKey: '<usingmapsapikeyhere>' }"
  type="GeoChart"
  :data="countriesForMap"
  :options="chartOptions"
  ref="gChart"
/>

나라들.ForMap ----

computed: {
    ...mapState(["countriesForMap"]),
  }

난 이해했다.어레이를 갱신하는 대신 변환이 같은 어레이에 새로운 데이터를 추가했기 때문에 어레이를 사용할 수 없게 되었습니다.왜 아직 지도에 정확한 데이터를 반영하고 있었는지 모르겠지만, 돌연변이 코드를 변경했기 때문에 지금은 정상적으로 동작하고 있습니다.

예를 들어, 초기 어레이는 다음과 같습니다.

[
["Country", "Data"],
["India", 42],
["Japan", 12]
]

잘못 설정된 변환 함수 때문에 새 데이터 배열은 다음과 같습니다.

[
["Country", "Data"],
["India", 42],
["Japan", 12],
["Country", "Data"],
["India", 23],
["Japan", 7]
]

그것을 고치면 문제가 해결된다.

언급URL : https://stackoverflow.com/questions/68188423/using-vue-google-chart-geochart-chart-reloads-on-data-change-but-legend-gets