как сделать минимальное заполнение графика js линейных графиков

Question

У меня есть такой график:

Я хочу сделать так:

, если мы видим, что на второй строковой диаграмме есть минимальное заполнение.

вот мой код:

html:

 <canvas id="canvas"></canvas>

мой js файл:

  var data = [1,0,3,0,5,6]
  var lineChartData = {
  labels: ['Mon', 'Tues', 'Wed', 'Thu','Fri', 'Sat', 'Sun'],
  datasets: [{
      label: 'Temperature',
      borderColor: '#077d07',
      backgroundColor: '#077d07',
      fill: 'origin',
      data: data ,
      yAxisID: 'y-axis-1'}
     ]
   };

     var weekly  = Chart.Line('canvas', {
      data: lineChartData,
      options: {
          responsive: true,
          hoverMode: 'index',
          stacked: false,
          title: {
              display: true,
              text: 'Last updated at  : '+ new Date().toLocaleString()
          },
          scales: {
              yAxes: [{
                ticks:{
                    min: 0,
                    max:10,
                    stepSize:2
                  },
                  type: 'linear',
                  position: 'left',
                  id: 'y-axis-1'
                }],
          }
      }
  });

здесь я использовал заполнение источника, как использовать минимальное заполнение.

Answer 1

Пожалуйста, проверьте следующий код, который я только что попытался получить по вашему желанию.

Вы можете делать сложные градиенты, но вот код простого (изменение непрозрачности того же красного цвета)

ГЛАВНЫЙ ФОКУС

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(214, 31, 31, 0.5)');   
gradient.addColorStop(1, 'rgba(214, 31, 31, 0)');

ПРИМЕРНЫЙ КОД

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

/*** Gradient ***/
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(214, 31, 31, 0.5)');   
    gradient.addColorStop(1, 'rgba(214, 31, 31, 0)');
/***************/

var data = {
         labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
            datasets: [
                {
                    fillColor : gradient, // Put the gradient here as a fill color
                    strokeColor : "#ff6c23",
                    pointColor : "#fff",
                    pointStrokeColor : "#ff6c23",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#ff6c23",
                    data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
                }
            ]
        };

        var options = {
            responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,
            tooltipFillColor: "rgba(0,0,0,0.8)",
            tooltipFontStyle: "bold",
            tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
            scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
        };

        


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chart" width="800" height="400"></canvas>