如何配置Chart.js折线图关闭填充效果仅显示折线线条

你只需要调整fill属性即可关闭折线下方的填充区域，仅保留折线线条，共有两种配置方案：

方案1：全局关闭所有折线填充（适合所有折线都不需要填充的场景） #

在配置项的options中新增elements.line.fill配置，设为false即可，修改后的config代码如下：

var config = {
    type: 'line',
    data: {
        labels: labels,
        datasets: datasets
    },
    options: {
        // 新增以下全局配置
        elements: {
            line: {
                fill: false
            }
        },
        // 原有其他配置保持不变
        responsive: true,
        title: {
            display: true,
            text: 'Leads diários'
        },
        tooltips: {
            mode: 'index',
            intersect: true,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Dias'
                }
            }],
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: true,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        }
    }
};

方案2：为单个数据集单独配置关闭填充（适合仅部分折线不需要填充的场景） #

在每个需要关闭填充的dataset对象中新增fill: false属性即可，示例如下：

var datasets = [
    {
        "label":"Formulário Site",
        "data":[0,0,0,...],
        "backgroundColor":"#4dc9f6",
        "borderColor":"#4dc9f6",
        "fill": false // 新增该行关闭填充
    },
    // 其他dataset同理添加fill: false即可
];

原理解释 #

Chart.js折线图默认开启填充效果，会使用backgroundColor属性值填充折线和X轴之间的区域，将fill设为false后，就会隐藏填充区域，仅显示borderColor对应的折线线条，完全匹配你期望的展示效果。

内容的提问来源于stack exchange，提问作者Crazy