fill：'origin'属性不适用于我的图表

Question

我正在使用chart.js创建图表。我的数据中可能有正数和负数，所以我需要从零点开始填充图表，直到数据大于0，再到底部填充负数据。我需要做这样的事情：

我发现，属性fill: 'origin'必须有所帮助，但我无法使其正常工作。这是我的小提琴：http://jsfiddle.net/vaxobasilidze/zm470gsq/4/

function factorData(data) {
   let _data = data.map((e, i, a) => {
      let prev = a[i - 1];
      let next = a[i + 1];
      if (e === prev && e === next) return '' + e;
      return e;
   }).map(e => typeof e === 'string' ? null : e);
   return _data;
}

var ctx = document.getElementById("chart").getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(250,174,50,1)');   
    gradient.addColorStop(1, 'rgba(250,174,50,0)');
    
var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
    gradient1.addColorStop(0, 'rgba(255,0,0,1)');   
    gradient1.addColorStop(0.5, 'rgba(0,255,0,1)');
    gradient1.addColorStop(1, 'rgba(255,0,0,1)');   
/***************/

var datas = [];
var labelss = [];
var quantity = 50;
for(var i=0; i<quantity; i++){
	var test = Math.floor((Math.random() * 100) - 50);
  datas.push(test);
  labelss.push("");
}

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function () {
    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var ctx = this.chart.ctx;
    var originalStroke = ctx.stroke;
    ctx.stroke = function () {
      ctx.save();
      ctx.shadowBlur = 7;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

var data = {
            labels : labelss,
            datasets: [
                {
                    fillColor : gradient1, // Put the gradient here as a fill color
                    strokeColor : gradient1, //"#ff6c23"
                    pointColor : "#fff",
                    pointStrokeColor : "rgba(0,0,0,0)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#ff6c23",
                    data : factorData(datas),
                    spanGaps: true,
                    fill: 'origin'
                }
            ]
        };
        
        if(quantity > 600){
        	 var options = {
              responsive: true,
              datasetStrokeWidth : 1,
              pointDotRadius: 0,
              pointDotStrokeWidth : 0,
              pointHitDetectionRadius : 0,
              tooltipFillColor: "rgba(120,0,0,0.8)",
              tooltipFontStyle: "bold",
              bezierCurve: false,
              animation: false,
              scaleFontColor: "#FFFFFF",
              scaleFontStyle: "bold"
          };
        }
        else {
        	 var options = {
            responsive: true,
            datasetStrokeWidth : 2,
            pointDotRadius: 1.5,
            pointDotStrokeWidth : 0,
            pointHitDetectionRadius : 0,
            tooltipFillColor: "rgba(120,0,0,0.8)",
            tooltipFontStyle: "bold",
            bezierCurve: false,
            animation: false,
            scaleFontColor: "#FFFFFF",
            scaleFontStyle: "bold"
        };
        }

        var myLineChart = new Chart(ctx).LineAlt(data, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="chart" width="800" height="400" style="background: #202020"></canvas>

我该怎么办？我在Google中找不到任何类似的东西，实际上可以使用chart.js吗？