仅将颜色应用于Chart.js折线图的下半部分

Question

我有这条线chart

如何仅在线下方的图表部分为背景着色？就像在这张照片

这是我正在使用的代码（这是一个反应组件的一部分，你可以从this.props看到）：

    var canvas: any = document.getElementById('temperature-chart');
    var ctx = canvas.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',

        // The data for our dataset
        data: {
            labels: this.props.labels,
            datasets: [{
                label: "Temperatures",
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                borderColor: 'rgba(255, 206, 86, 1)',
                data: this.props.numbers,
                borderWidth: 1
            }],
        },

我还定制了一些选项来删除y轴并添加标签。

Answer 1

http://www.chartjs.org/docs/latest/charts/area.html

看起来你的图表正在填充原点，因为你有负面和正面的数据，这使得它填充上下0。尝试添加：

fill: 1,

这应该填充到数据集1并填写您拥有的数据。