仅将颜色应用于Chart.js折线图

Question

我有这个折线图

如何仅在线下方的图表部分为背景着色？如图所示

这是我正在使用的代码（这是一个反应组件的一部分，你可以从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 axix并添加标签。

Answer 1

我的解决方案-

    datasets: [
        {
          fill:'start',
          backgroundColor: 'what you want',
          ...
        }

Answer 2

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

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

fill: 1,

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