0

Estoy trabajando con Chart JS (https://www.chartjs.org) y un plugin del mismo que se llama datalabels para mostrar los valores en el gráfico.

Uso una gráfica Radar donde muestro una calificación por servicio del 1 al 5

Necesito que los valores se muestren exactos 4,1 4,8 4,3 de esta forma, actualmente solo me muestra el numero completo 4,4,4,4 de esta forma.

Dejo mi script por si alguno sabe cómo puedo lograr mostrarlo en decimales.

var Etiqueta4 = <%= Etiquetas4 %>;
                    var Valor4 = <%= valores4 %>;
                    var ctx2 = document.getElementById("Graf0").getContext('2d');
                    Chart.defaults.global.defaultFontFamily  = "candara"  
                    Chart.defaults.global.defaultFontSize  = 0  
                    var Graf0 = new Chart(ctx2, {
                        type: 'radar',
                        responsive: true,
                        scaleSteps: 4,
                        scaleStepWidth: 5,
                        scaleStartValue: 1,
                        data: {
                            labels: Etiqueta4,
                            datasets: [{
                                backgroundColor: ['rgba(232,95,0,0.4)'],
                                scaleSteps: 5,
                                fill: true,
                                min: 1,
                                max: 5,
                                scaleStartValue: 1,
                                pointRadius: 3,
                                pointBorderWidth: 3,
                                pointHoverRadius: 5,
                                pointBackgroundColor: "#FF4400",
                                pointBorderColor: ['rgba(255,68,0,0.9)'],
                                data: Valor4,},
                            ]
                        },

                        options: {
                            plugins: {
                                datalabels:{
                                    color: '#000',

                                    font: {
                                        size: 20,
                                        weight: 'bold'
                                    }
                                }
                            },

                            legend: { 
                                display: false 
                            },

                            scale: {
                                ticks: {
                                    beginAtZero: true,
                                    min: 0.5,
                                    max: 5,
                                    stepSize: 0.5,   
                                    fontSize: 22

                                },

                                pointLabels: {
                                    fontSize: 27,
                                    fontColor: '#000'
                                },
                            },
                            title: {
                                display: true,
                                text: 'ENCUESTA - EVALUACIÓN DE DESEMPEÑO',
                                fontSize: 30,
                                fontFamily: "candara",
                                fontColor: '#000'
                            },
                        }                       
                    });
<div class="grafico_radar">
                    <canvas id="Graf0" class="radar"></canvas>
                </div>

 Private Sub buscar_evaluacion()
        Try
            Dim sResp = oDatos.Get_Encuesta
            Valores4.Append("[")
            Etiquetas4.Append("[")
            For Each row As DataRow In sResp.Tables(0).Rows
                Valores4.Append(String.Format("'{0}',", Val(row("Valor").ToString())))
                Etiquetas4.Append(String.Format("'{0}',", row("Titulo").ToString()))
            Next
            Etiquetas4.Append("]")
            Valores4.Append("]")
        Catch ex As Exception

        End Try
    End Sub

introducir la descripción de la imagen aquí

4
  • Hola, una pregunta ¿Qué datos tiene tu array de datos (valores4)?. Porque tal como tienes configurado el chart debería mostrarte los puntos con los decimales. el 31 ene. 2019 a las 10:55
  • Valores4 envia 5 Valores del 1 al 5 amplio mi pregunta con el back end el 31 ene. 2019 a las 13:24
  • Pues en tu backend veo que estás almacenando un tipo string. Corrígeme si me equivoco, pero valores4 tal como lo construyes no es un array con números, en cambio es un string. el 31 ene. 2019 a las 13:55
  • ¿Puedes hacer un console.log(typeof Valor4) y además un console.log(Valor4), después que lo asignas para saber que te devuelve?. Me refiero a hacerlo en el FrontEnd el 31 ene. 2019 a las 14:04

1 respuesta 1

2

El problema se puede encontrar en 2 casos. 1. El campo valor de tu for each --> Val(row("Valor").ToString() te esta regresando un valor entero, prueba con capturar el dato en una variable tipo string y luego agregas al variable al código: Ejemplo:

   Private Sub buscar_evaluacion()
        Try
            Dim sResp = oDatos.Get_Encuesta
            Dim dato As String
            Valores4.Append("[")
            Etiquetas4.Append("[")
            For Each row As DataRow In sResp.Tables(0).Rows
                dato = row("Valor").ToString()
                Valores4.Append(String.Format("'{0}',", dato))
                Etiquetas4.Append(String.Format("'{0}',", row("Titulo").ToString()))
            Next
            Etiquetas4.Append("]")
            Valores4.Append("]")
        Catch ex As Exception

        End Try
    End Sub
  1. Revisa que la configuración regional del IIS comulgue con la configuración regional de SQL, el cual te trae el dato. Si SQL te retorna valor decimal con coma (,) tu servidor IIS debe estar configurado con separador decimal coma (,)

Con una de éstas 2 opciones (o ambas) te debe funcionar.

1
  • Use ambos metodos y funcionaron correctamente. Gracias el 31 ene. 2019 a las 15:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.