当 opaque 为 1 时，ChartJs 上的注释显示在图的顶部

Question

我正在尝试使用 ChartJS，这是我使用不透明度 = 0.5 的注释插件时得到的结果

box1: {
    type: "box",
    drawTime: "afterDraw",
    yMin: 22,
    yMax: 40,
    backgroundColor: "rgba(255, 229, 153, 0.5)",
    borderColor: "rgba(100, 100, 100, 0.2)",
},

我的问题是，不透明度不等于 1 时颜色会变浅，这对我的客户来说是一个大问题。

当我将不透明度设置为 1 时，线条会隐藏在框下方。

我尝试围绕 z 对象进行操作，但它不起作用。我使用的是 Carbon-Graph，它有一个称为区域的等效功能。优点是保留颜色而不影响不透明度。但在我正在从事的项目中，我发现 ChartJs 比使用 Carbon-Graph 涵盖了更多的要求。

https://engineering.cerner.com/carbon-graphs/#/regions/line/multiple-regions

有没有办法在注释框上渲染图形线，以便我可以将不透明度保持为 1？

我找到了一个使用旧版本的 ChartJs 2 的实现，它使用 yHighlightRange，我在这里找到了这篇文章，但由于注释是推荐的方式，我希望有一个解决方法。

Chart.js 2.0 中背景可接受的范围突出显示

Answer 1

我要感谢@kikon 的回答

box1: {
    type: "box",
    drawTime: "beforeDraw",
    yMin: 22,
    yMax: 40,
    backgroundColor: "rgba(255, 229, 153, 1)",
    borderColor: "rgba(100, 100, 100, 0.2)",
},