es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Utilizando el método dataURI, no estoy obteniendo ningún color para la serie de mi gráfico de torta.

Utilizando el método dataURI, no estoy obteniendo ningún color para la serie de mi gráfico de torta.

24 Jul, 2023 Programación

Tengo el siguiente código en ejecución:

var options = {
    chart: {
        type: 'donut',
        fontFamily: 'Lato Light'
        },
    series: [1,2,3,4,5],
    labels: ['1','2','3','4','5'],
    theme: {
        monochrome: {
            enabled: true,
            color: '#b19254',
            shadeTo: 'dark',
            shareIntensity: 0.15
        }
    },
    //colors: ['#b19254', '#9f834c', '#8e7543', '#7c663b', '#b99d65', '#c8b387'],
    legend: {
        position: 'bottom'
        },
    plotOptions: {
        pie: {
            donut: {
                labels: {
          show: true,
            name: {
                show: false
            },
          value: {
              offsetY: -1,
              show: true
            },
          total: {
              show: false,
                            showAlways: false,
                            formatter: function (w) { return String(Math.round(chart.w.globals.seriesTotals.reduce((a,b) => { return a+b}, 0) * 100) / 100) + ' ' + $currency}
            }
          }
            }

        }
    },
}

    var chart = new ApexCharts(document.querySelector("#investment-chart-wrapper"), options);
    chart.render();

    var $chartData = chart.dataURI();
    $chartData.then(
        (result) => {
            document.querySelector('#chartimg').setAttribute('src',result.imgURI);
    });

La parte con la que estoy lidiando es el resultado de la promesa del método dataURI() de aquí.

Por alguna razón, el gráfico que obtengo tiene toda la información, incluidas las etiquetas de las series, pero el color de las series no se muestra, dejándome con esto. Sin embargo, el color se utiliza en la leyenda en la parte inferior.

Estoy seguro de estar pasando por alto algo aquí. Por favor, avíseme qué es.

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está con el array de colores en el objeto de opciones. Al utilizar el método dataURI(), el array de colores se ignora y los colores del gráfico se establecen en función del tema o los colores predeterminados.

    Para solucionar el problema, puedes eliminar el array de colores o definir los colores utilizando el tema o los colores predeterminados. Por ejemplo:

    var options = {
    chart: {
        type: 'donut',
        fontFamily: 'Lato Light',
    },
    series: [1,2,3,4,5],
    labels: ['1','2','3','4','5'],
    theme: {
        monochrome: {
            enabled: true,
            shadeTo: 'dark',
            shareIntensity: 0.15,
        },
    },
    legend: {
        position: 'bottom',
    },
    plotOptions: {
        pie: {
            donut: {
                labels: {
                    show: true,
                    name: {
                        show: false,
                    },
                    value: {
                        offsetY: -1,
                        show: true,
                    },
                    total: {
                        show: false,
                        showAlways: false,
                    },
                },
            },
        },
    },
};

var chart = new ApexCharts(document.querySelector("#investment-chart-wrapper"), options);
chart.render();

var $chartData = chart.dataURI();
$chartData.then((result) => {
    document.querySelector('#chartimg').setAttribute('src',result.imgURI);
});

    Este código utiliza los colores predeterminados para el gráfico, pero también puedes definir una paleta de colores personalizada utilizando el tema. Por ejemplo:

    var options = {
    chart: {
        type: 'donut',
        fontFamily: 'Lato Light',
    },
    series: [1,2,3,4,5],
    labels: ['1','2','3','4','5'],
    theme: {
        palette: 'palette1', // define custom color palette
    },
    legend: {
        position: 'bottom',
    },
    plotOptions: {
        pie: {
            donut: {
                labels: {
                    show: true,
                    name: {
                        show: false,
                    },
                    value: {
                        offsetY: -1,
                        show: true,
                    },
                    total: {
                        show: false,
                        showAlways: false,
                    },
                },
            },
        },
    },
};

var chart = new ApexCharts(document.querySelector("#investment-chart-wrapper"), options);
chart.render();

var $chartData = chart.dataURI();
$chartData.then((result) => {
    document.querySelector('#chartimg').setAttribute('src',result.imgURI);
});

    Este código define una paleta de colores personalizada con la propiedad de paleta del tema y la utiliza para el gráfico. Puedes definir tu propia paleta de colores personalizada o elegir entre las predefinidas disponibles en la documentación.

Comments are closed.