apexcharts グラフ表示時にオプションの指定ミスでてたエラー vuejs apexcharts
apexcharts グラフ表示時にオプションの指定ミスでてたエラー
・エラー内容
-----------------------------------
Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'yRatio')
TypeError: Cannot read properties of null (reading 'yRatio')
at t.value (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:5:370782)
at t.value (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:5:400584)
at t.value (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:10:37925)
at Proxy.eval (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:5:5035)
at eval (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:10:36287)
at new Promise (<anonymous>)
at Proxy.value (webpack-internal:///../node_modules/apexcharts/dist/apexcharts.common.js:10:21771)
at init (webpack-internal:///../node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js:283:30)
-----------------------------------
原因は
templateで apexcharts 表示時に変数を入れたい場合は : をつけないといけないみたい
つまり
type ではなくて、:type
【NG】
<div v-for="cht in r_all" :key="cht.id" >
<apexchart width="300" type="cht.type" :options="cht.chartOptions" :series="cht.series" ></apexchart>
</div>
【OK】
<div v-for="cht in r_all" :key="cht.id" >
<apexchart width="300" :type="cht.type" :options="cht.chartOptions" :series="cht.series" ></apexchart>
</div>