线下的 HTML 画布填充区域

Posted 2023-03-25

【中文标题】线下的 HTML 画布填充区域

【英文标题】：HTML Canvas Fill Area Under Line

【发布时间】：2018-09-10 19:14:44

【问题描述】：

我正在使用 Chart.js 绘制一条水平线。因此，我有一个用于绘制水平线并为这些线下方的区域着色的插件：

$(document).ready(function() 
  var horizonalLinePlugin = 
    afterDraw: function(chartInstance) 
      var yScale = chartInstance.scales["y-axis-0"];
      var canvas = chartInstance.chart;
      var ctx = canvas.ctx;
      var index;
      var line;
      var strokeStyle;
      var fillStyle;

      if (chartInstance.options.horizontalLine) 
        for (index = 0; index < chartInstance.options.horizontalLine.length; index++) 
          line = chartInstance.options.horizontalLine[index];

          if (!line.strokeStyle) 
            strokeStyle = "rgba(169, 169, 169, 0.6)";
           else 
            strokeStyle = line.strokeStyle;
          

          if (!line.fillStyle) 
            fillStyle = 'rgba(179, 26, 57, 0.5)';
           else 
            fillStyle = line.fillStyle;
          

          if (line.y) 
            yValue = yScale.getPixelForValue(line.y);
           else 
            yValue = 0;
          

          ctx.lineWidth = 3;
          if (yValue) 
            ctx.beginPath();
            ctx.moveTo(0, yValue);
            ctx.lineTo(canvas.width, yValue);
            ctx.fillStyle = fillStyle;
            ctx.fill();
            ctx.strokeStyle = strokeStyle;
            ctx.stroke();
          

          if (line.text) 
            ctx.fillStyle = fillStyle;
            ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
          
        
        return;
      ;
    
  ;
  Chart.pluginService.register(horizonalLinePlugin);
);

不幸的是，水平线下方的区域没有着色。我正在使用 ctx.fill() 但它没有显示任何效果。

【参考方案1】：

因此我认为您不需要插件；该行为可以通过每个数据集的填充属性进行配置

<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
var lineChartData = 
        labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
        datasets : [
            
                type: 'line',
                label: "2017",
                backgroundColor: 'rgba(151,249,190,0.5)',
                borderColor: 'rgba(151,249,190,1)',
                borderWidth: 1,
                data : [1,2,3,4,5,6,7,8,9,10,11,12],
                fill: true
            ,
            
                type: 'line',
                label: "2018",
                backgroundColor: 'rgba(252,147,65,0.5)',
                borderColor: 'rgba(252,147,65,1)',
                borderWidth: 1,
                data : [12,11,10,9,8,7,6,5,4,3,2,1],
                fill: true
            
        ]
    ;
window.onload = function() 
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, 
        type: 'line',
        data: lineChartData,
        options: 
            responsive: true,
            legend: 
                position: 'top',
            ,
            title: 
                display: true,
                text: 'Chart'
            
        
    );
;
</script>