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.

¿Cómo establecer un formato de marca de verificación personalizado en las opciones de Chart.js desde el controlador de Laravel?

Estoy intentando personalizar las etiquetas de las marcas agregando el signo de dólar antes del valor real en un gráfico de barras a través de Laravel Charts. En la documentación de chartjs (https://www.chartjs.org/docs/2.7.3/axes/labelling.html#creating-custom-tick-formats) se describe cómo hacerlo de la siguiente manera:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Incluir un signo de dólar en las marcas
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }]
            }
        }
    }
});

Estoy teniendo dificultades con la función de devolución de llamada porque no sé cómo hacer esto en el controlador del gráfico. Actualmente se ve así (lo he pasado como una cadena formateada en JS), pero no funciona:

$this->chart->options([
    'maintainAspectRatio' => false,
    'showLines' => false,
    'scales' => [
        'xAxes' => [],
        'yAxes' => [
            [
                'ticks' => [
                    'display' => true,
                    'callback' => "{function(value, index, values) {
                        return '$' + value;
                    }}",
                ],
            ],
        ],
    ],
]);
Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para personalizar las etiquetas de las marcas en Laravel Charts, puedes seguir el ejemplo de la documentación de Chart.js modificando la función de devolución de llamada en el método options de la instancia del gráfico.

    Aquí tienes un ejemplo de implementación:

    $this->chart->options([
        'scales' => [
            'yAxes' => [
                [
                    'ticks' => [
                        'callback' => 'function(value, index, values) {
                            return "$" + value;
                        }',
                    ],
                ],
            ],
        ],
    ]);
    

    Ten en cuenta que la función de devolución de llamada se define como una cadena en el arreglo de opciones. Esto se debe a que las opciones se pasan como JSON al frontend, y la función de devolución de llamada se evaluará como código JavaScript por Chart.js.

    Con esta implementación, las etiquetas de las marcas en el eje y tendrán un signo de dólar antes del valor numérico.

Comments are closed.