Actualmente estoy usando la biblioteca ApexChart y, más particularmente, el gráfico de vértice de Vue combinado con nuxt.
Estoy creando un panel y estoy tratando de crear un gráfico mixto compuesto por:
Los tres gráficos se muestran en el siguiente orden (de atrás hacia adelante): Área - Barra - Línea
Me gustaría cambiar el orden para colocar el gráfico de barras en la parte posterior, pero no veo cómo hacerlo.
Intenté cambiar el orden de la serie para poner el gráfico de barras al final.
series() { return [ { name: 'My Line chart', type: 'line', data: this.capacityCalls }, { name: 'My Area Chart', type: 'area', data: this.callsRealProd }, { name: 'My Bar Chart', type: 'bar', data: this.callsToMake }, ] },Aquí hay un evento reproducible mínimo.
<template> <VueApexCharts type="line" height="700" :options="chartOptions" :series="series" /> </template> <script> export default { name: "Hello", data: () => { return { series: [{ name: 'TEAM A', type: 'line', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'bar', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], chartOptions: { colors: ['#F44E7C','#FBBC04','#49619C'], plotOptions: { bar: { columnWidth: '100%' } }, stroke: { curve: 'smooth', width: [3, 3, 1] }, fill: { opacity: [1, 0.6, 0.2] }, }, } }, } </script>Estoy usando nuxt.js y cargando la biblioteca npm apexChart a través del siguiente complemento:
import Vue from 'vue' import VueApexCharts from 'vue-apexcharts' Vue.component('VueApexCharts', VueApexCharts);Probablemente agrega cada gráfico en serie a medida que terminan de cargarse individualmente. ¿Qué tal crear un componente separado para cada gráfico y definir el orden definiendo componentes en su plantilla?
<line-chart></line-chart> <area-chart></area-chart> <bar-chart></bar-chart>Tuve un problema similar, no estoy seguro de cuál es la solución lógica. Pero el problema se resuelve de la siguiente manera con jquery.
chart: { events: { updated: function (chartContext, options) { $('.apexcharts-area-series').insertAfter('.apexcharts-bar-series'); }, mounted: function (chartContext, options) { $('.apexcharts-area-series').insertAfter('.apexcharts-bar-series'); } } },Gracias a la respuesta de @Hasan Bilir, lo hice funcionar usando Element.insertAdjacentElement
así es como lo hice usando vainilla JS
chart: { event: { updated: function (chartContext, options) { const barChart = document.querySelector('.apexcharts-area-series'); barChart.remove(); document.querySelector('.apexcharts-bar-series').insertAdjacentElement('afterend', barChart); }, mounted: function (chartContext, options) { const barChart = document.querySelector('.apexcharts-area-series'); barChart.remove(); document.querySelector('.apexcharts-bar-series').insertAdjacentElement('afterend', barChart); } } }