Javascript 如何在调整窗口大小时保持chartjs/ng2图表的渐变？

我在我的图表上应用了一些渐变规则。正如你在下面看到的，它看起来很棒

但是，当调整浏览器窗口的大小（即窗口的宽度较小）时，渐变会被破坏（底部蓝色消失）。截图：

我想用所有值保持图形的渐变，并适应不同的宽度（响应）。有办法吗？以下是我尝试过但没有成功的方法：

.TS文件

ngAfterViewInit（）{
const ctx=（this.myChart.nativeElement.getContext（'2d'）；
const purple\u orange\u gradient=ctx.createLinearGradient（0,200,0,20）；
紫色+橙色+渐变色。添加颜色停止（0.1，#000279”）；
紫色-橙色-渐变色。添加颜色停止（0.2，#0000F2”）；
紫色-橙色-渐变色。添加颜色停止（0.3，#0362FD）；
紫色-橙色-渐变色。添加颜色停止（0.4，#04D3FD）；
紫色-橙色-渐变色。添加颜色停止（0.5，#45FFB7“）；
紫色-橙色-渐变色。添加颜色停止（0.6，“#B7FF46”）；
紫色-橙色-渐变色。添加颜色停止（0.7，#FFD401“）；
紫色-橙色-渐变色。添加颜色停止（0.8，#FE6500”）；
紫色+橙色+渐变色。添加颜色停止（0.9，#F30004“）；
紫色+橙色+渐变色。添加颜色停止（1，#7E0100”）；
常数条形图=新图表（ctx{
类型：“水平条”，
数据：{
标签：[]=this.historogramlabels.reverse（），
数据集：[{
边框颜色：紫色\橙色\渐变色，
点边界颜色：紫色\橙色\渐变，
pointBackgroundColor:紫色\橙色\渐变色，
pointHoverBackgroundColor:紫色\橙色\渐变色，
pointHoverBorderColor:紫色\橙色\渐变色，
点边界宽度：10，
点半径：10，
pointHoverBorderWidth:1，
点半径：3，
填充：是的，
背景颜色：紫色\橙色\渐变色，
边框宽度：4，
数据：[]=this.historogramgraphdata
}]
},
选项：{
图例：{
显示：假，
位置：“底部”
},
比例：{
雅克斯：[{
滴答声：{
显示：假，
fontColor:“rgba（0,0,0,0.5）”，
字体：“粗体”，
贝吉纳泽罗：是的，
马克斯：1，
填充：20，
},
网格线：{
drawTicks:false，
显示：假
}
}],
xAxes：[{
网格线：{
zeroLineColor:“透明”，
},
滴答声：{
填充：20，
贝吉纳泽罗：是的，
fontColor:“rgba（0,0,0,0.5）”，
字体：“粗体”
}
}]
}
}
}
)
}

.HTML

---

每次调整画布大小时，都必须更改渐变。我花了一段时间才找到一个好的结构来最小化代码行并优化性能。这是我能做到的最好的了

当

chart.js

onResize（）

启动时会有一些例外，但我无法完全解决这个问题。但对于简单的大小调整，它应该可以工作

完整代码（）：

让sData={}
sData.labels=[]
sData.data=[]
常数计数=50
for（设x=0；xlet sData = {}
sData.labels = []
sData.data = []

const count = 50
for (let x = 0; x < count; x++) {
  sData.data.push(Math.floor(Math.random()*100))
  sData.labels.push(x)
}

const canvas = document.getElementById('chart')
const ctx = canvas.getContext("2d")

let purple_orange_gradient

function updateGradient() {
  let bottom = bar_chart.chartArea.bottom
  let top = bar_chart.chartArea.top
  purple_orange_gradient = ctx.createLinearGradient(0, bottom+top, 0, top)
  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.0, "#7E0100")

  return purple_orange_gradient
}

const bar_chart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: sData.labels,
    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: sData.data
    }]
  },
  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"
        }
      }]
    },
    onResize: function(chart, size) {
      // onResize gradient change
      changeGradient()
    }
  }
});

// Initial gradient change
changeGradient()


function changeGradient() {
  let newGradient = updateGradient()

  bar_chart.data.datasets[0].borderColor = newGradient
  bar_chart.data.datasets[0].pointBorderColor = newGradient
  bar_chart.data.datasets[0].pointBackgroundColor = newGradient
  bar_chart.data.datasets[0].pointHoverBackgroundColor = newGradient
  bar_chart.data.datasets[0].pointHoverBorderColor = newGradient
  bar_chart.data.datasets[0].backgroundColor = newGradient

  bar_chart.update()
}