Traté de crear un gráfico con vue 3 y gráficos de Google. El gráfico se crea con el paquete vue-google-charts. Pero no pude crear un envoltorio de control para ello. Quiero incluir RangeSliderFilter en mis gráficos. Aquí está mi código.
<script setup> import AppLayout from '@/Layouts/AppLayout.vue'; import { Head, Link } from '@inertiajs/inertia-vue3'; import { ref, onMounted, nextTick } from "vue"; import { GChart } from 'vue-google-charts' const props = defineProps({ data: Object }) const chartData = ref([]) const rangeSlider = ref(); onMounted(() => { chartData.value[0] = props.data.header_array; props.data.msg_array.map((val, index) => { val[0] = new Date(val[0]) chartData.value.push(val) }) }); const chartOptions = ref({ title: "Temperature History", curveType: 'function', height: 700, }) </script> <template> <Head title="Temperature History" /> <AppLayout> <div class="py-12"> <div class="mx-auto sm:px-6 lg:px-8"> <div class="shadow-md sm:rounded-lg bg-white"> <div class="p-4"> <GChart v-if="chartData.length > 0" type="LineChart" :data="chartData" :options="chartOptions" /> <div id="filter_div"></div> </div> </div> </div> </div> </AppLayout> </template>¿Como puedo hacer esto? ¿Hay algún buen paquete de gráficos para esto?