首页 > 解决方案 > Chart.js 折线图——去除线上的标签

问题描述

我正在使用带有 C# 和 Ajax 调用的 chart.js。我正在尝试开发我的第一个折线图。对于每个数据点,我在线上都有圆圈。但是,每个数据点都显示圆圈内的值。如何删除这个值,所以它只是一个蓝点?

我正在使用 DataLabels 库。我昨天尝试了很多选项,但无法从线上的点中删除数字。

这是我的折线图的完整功能:-

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.');
            }
        });
    }

谢谢

标签: chart.js

解决方案


把这个放进去option

plugins: {
    datalabels: {
        display: false,
    },
}

推荐阅读