Estoy usando chart.js con llamadas C # y Ajax. Estoy tratando de desarrollar mi primer gráfico de líneas. Tengo círculos, en la línea, para cada punto de datos. Sin embargo, cada punto de datos muestra el valor dentro del círculo. ¿Cómo elimino este valor para que sea solo un punto azul?

Estoy usando la biblioteca DataLabels. Ayer probé muchas opciones, pero no pude eliminar los números de los puntos de la línea.

Esta es la función completa para mi gráfico de líneas: -

function LoadChart5() {
        var processType = "";

        var sdt = $("[id*=startDate]").val();
        var edt = $("[id*=endDate]").val();
        var sd = moment(sdt, "DD-MM-YYYY").format("YYYY-MM-DD");
        var ed = moment(edt, "DD-MM-YYYY").format("YYYY-MM-DD");

        $('[id*=processType] :selected').each(function (i, selected) {

            if (i == 0) {
                processType = $(selected).val();
            }
            else {
                processType = processType + "\\',\\'" + $(selected).val();
            }
        });

        $.ajax({
            type: "POST",
            url: "ewDashboard.aspx/GetChart5",
            data: "{sd: '" + sd + "', ed: '" + ed + "', processType: '" + processType + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var labels = r.d[0];
                var series1 = r.d[1];
                var data = {
                    labels: labels,
                    datasets: [{
                        label: 'Process Count',
                        data: series1,
                        fill: false,
                        borderColor: "blue",
                        color: "red",
                        backgroundColor: "blue",
                        radius: 10,

                    }
                    ]
                };

                $("#dvChart5").html("");
                var canvas = document.createElement('canvas');
                $("#dvChart5")[0].appendChild(canvas);

                var ctx2 = canvas.getContext('2d');

                var piechart = new Chart(ctx2, {
                    type: 'line',
                    data: data,
                    options: {
                        title: {
                            display: false
                        },
                        scales: {
                            xAxes: [{
                                ticks: {
                                    minRotation: 75,
                                    maxRotation: 90,
                                    fontFamily: "'Open Sans', sans-serif",
                                    fontSize: 14,
                                    fontStyle: "bold",
                                    fontColor: "#545454",
                                    autoSkip: false
                                }
                            }],

                        },

                        tooltips: {
                        },
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    }
                });
            },
            failure: function (response) {
                alert('There was an error.');
            }
        });
    }

Gracias

2
Wheels496 16 oct. 2018 a las 18:14

2 respuestas

La mejor respuesta

Pon esto en option

plugins: {
    datalabels: {
        display: false,
    },
}
1
Aroon 17 oct. 2018 a las 09:27

Esto funciona:

options: {
    legend: {
        display: false
    },
}
0
cyan 15 nov. 2019 a las 16:41