Chartjs背景颜色设置

Question

我在角度应用程序中有一个 ChartJS 折线图，我需要折线图将负数的背景变成红色 我遇到的问题是我不知道如何计算图表的底部

      const canvasBackgroundColor = {

    id: 'canvasBackgroundColor',

    beforeDraw(chart: any, args: any, pluginOptions: any) {

      const { ctx, chartArea: { top, bottom, left, right, width, height }, scales: { x, y } } = chart;

      ctx.fillStyle = 'rgba(255 26, 104, 0.2)';

      ctx.fillRect(left, y.getPixelForValue('0'), width, canvasBottom);

    }

  }

  if (this.chart == null) {

    this.chart = new Chart("solarChart", {

      type: 'line',

      //this denotes tha type of chart

      data: {// values on X-Axis





        labels: this.createXLabels(),

        datasets: [

          {

            label: "Solar",

            data: paybackArray,

            showLine: true,

            pointStyle: 'crossRot',



          }

        ]

      },

      options: {



        scales: {



          x: {

            grid: {

              display: false

            },

            title: {

              display: true,

              text: 'Year',

              font: {

                size: 16

              }

            }

          },

          y: {



            display: true,

            title: {

              display: true,

              text: 'Dollars',

              font: {

                size: 16

              }

            },



          }

        }


      },

      plugins: [canvasBackgroundColor]

    });

  }

我想要负象限为红色，但颜色会通过 x 轴渗透或未到达 x 轴，从而在中间留下空白

Answer 1

ctx.fillRect(left, y.getPixelForValue('0'), width, Bottom - y.getPixelForValue('0'));