如何保护chartJs渐变颜色免于窗口大小调整

Question

我在chartjs图表上应用了一些渐变规则。看起来很棒，如下图所示

但是当您减小浏览器的宽度时，如您在下面看到的那样，它被损坏了（底部蓝色的颜色消失了]

我想用所有值保护该图并适合所有宽度（具有响应性）。有什么方法可以做到这一点？这是我在下面尝试的，但没起作用

。TS文件

ngAfterViewInit() {
    const ctx = (<HTMLCanvasElement>this.myChart.nativeElement).getContext('2d');
    const purple_orange_gradient = ctx.createLinearGradient(0, 200, 0, 20);
    purple_orange_gradient.addColorStop(0.1, "#000279");
    purple_orange_gradient.addColorStop(0.2, "#0000F2");
    purple_orange_gradient.addColorStop(0.3, "#0362FD");
    purple_orange_gradient.addColorStop(0.4, "#04D3FD");
    purple_orange_gradient.addColorStop(0.5, "#45FFB7");
    purple_orange_gradient.addColorStop(0.6, "#B7FF46");
    purple_orange_gradient.addColorStop(0.7, "#FFD401");
    purple_orange_gradient.addColorStop(0.8, "#FE6500");
    purple_orange_gradient.addColorStop(0.9, "#F30004");
    purple_orange_gradient.addColorStop(1, "#7E0100");


    const bar_chart = new Chart(ctx, {
      type: "horizontalBar",
      data: {
        labels: []=this.histogramLabels.reverse(),
        datasets: [{
            borderColor: purple_orange_gradient,
            pointBorderColor: purple_orange_gradient,
            pointBackgroundColor: purple_orange_gradient,
            pointHoverBackgroundColor: purple_orange_gradient,
            pointHoverBorderColor: purple_orange_gradient,
            pointBorderWidth: 10,
            pointHoverRadius: 10,
            pointHoverBorderWidth: 1,
            pointRadius: 3,
            fill: true,
            backgroundColor: purple_orange_gradient,
            borderWidth: 4,
            data: []=this.histogramGraphData
        }]
      },
    options: {
        legend: {
            display:false,
            position: "bottom"
        },
        scales: {
            yAxes: [{
                ticks: {
                    display: false,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 1,
                    padding: 20,
                },
                gridLines: {
                    drawTicks: false,
                    display: false
                }
}],
            xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent",

},
                ticks: {
                    padding: 20,
                    beginAtZero: true,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold"
                }
            }]
        }
    }
    }

    )

 }

。HTML

   <div class="row my-2">
                <div class="col-md-6">
                        <canvas id=”myChart” #myChart height="130"></canvas>
                </div>
            </div>

Answer 1

无论何时调整画布大小，都必须更改渐变。花了我一段时间来找出一个好的结构，以减少代码行并优化性能。这是我能达到的最佳效果。

Answer 2