Chartjs 2.7.2，数据集重叠的堆叠折线图背景颜色

我的堆叠折线图中的数据集的背景颜色相互混合，就像下面一样。

的数据
下面是我的代码：

var chart = new Chart($('#chart-area'), {
    type: "line",
    data: {
        labels: [],
        datasets: [],
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        hover: {
            mode: 'index',
            intersect: false
        },
        scales: {
            yAxes: [{
                stacked: true
            }]
        }
    },
});

字符串
我创建了dinamic数据集：

chart.data.datasets.push({
     label: LABELS,
     borderColor: COLOR1,
     backgroundColor: COLOR2,
     data: []
});

型
我的颜色示例：

COLOR1 -> "#000c89",
   COLOR2 -> 'rgba(0, 12, 137, 0.4)'

型
任何想法如何使颜色看起来像他们的正常？他们得到混合（我认为这是因为透明度），我可以使他们没有透明度，但图表变得丑陋。

实际上，颜色混合是因为透明度。我不认为这是可以避免的，因为rgba中存在透明度通道的唯一原因是允许“前景”和“背景”颜色的混合。
实际上，rgba不应该提供比rgb更多的颜色。
通过在chart.js背景中使用rgba获得的漂亮颜色是将该颜色的rgb部分作为“前景”与通常为白色（rgb(255, 255, 255)）的图表背景相结合的结果。

rMix = Math.round(r * a + 255 * (1 - a))
gMix = Math.round(g * a + 255 * (1 - a))
bMix = Math.round(b * a + 255 * (1 - a))

字符串
下面是一个代码片段，

function runColors() {
  const ctxRgba = document.querySelector('#cvs_rgba').getContext('2d'),
    ctxRgb = document.querySelector('#cvs_rgb').getContext('2d'),
    textRgba = document.querySelector('#rgba'),
    textRgb = document.querySelector('#rgb');

  textRgba.innerText = '';
  textRgb.innerText = '';
  ctxRgba.fillStyle = 'rgb(255,255,255)';
  ctxRgba.fillRect(0, 0, 300, 150);
  ctxRgb.fillStyle = 'rgb(255,255,255)';
  ctxRgb.fillRect(0, 0, 300, 150);
  const r = parseInt(document.querySelector('#r').value, 10),
    g = parseInt(document.querySelector('#g').value, 10),
    b = parseInt(document.querySelector('#b').value, 10),
    a = parseFloat(document.querySelector('#a').value);
  if (r < 0 || r > 255 || b < 0 || b > 255 || g < 0 || g > 255 || a < 0 || a > 1) {
    document.querySelector('#error').innerText = 'Invalid data';
    return;
  }
  document.querySelector('#error').innerText = '';
  const sRGBA = `rgba(${r},${g},${b},${a.toFixed(4).replace(/0+$/, '')})`;
  textRgba.innerText = sRGBA;
  const r1 = Math.round(r * a + 255 * (1 - a)),
    b1 = Math.round(b * a + 255 * (1 - a)),
    g1 = Math.round(g * a + 255 * (1 - a));
  const sRGB = `rgb(${r1},${g1},${b1})`;
  textRgb.innerText = sRGB;

  ctxRgba.fillStyle = sRGBA;
  ctxRgba.fillRect(0, 0, 300, 150);

  ctxRgb.fillStyle = sRGB;
  ctxRgb.fillRect(0, 0, 300, 150);
}

runColors();

<body>
  <h3>
    <code>rgb</code> result of mixing an <code>rgba</code> color with a white background
  </h3>
  R:<input type="text" size="3" value="0" id="r" onchange="runColors()"> G:
  <input type="text" size="3" value="12" id="g" onchange="runColors()"> B:
  <input type="text" size="3" value="137" id="b" onchange="runColors()"> A:
  <input type="text" size="5" value="0.4" id="a" onchange="runColors()">
  <div id="error" style="color:red"></div>
  <div style="display: inline-block; border:1px solid black">
    <canvas id="cvs_rgba" style="width: 200px; height: 50px;background-color: rgb(255, 255, 255)"></canvas>
    <br>
    <code id="rgba"></code>
  </div>
  <div style="display: inline-block; border:1px solid black">
    <canvas id="cvs_rgb" style="width: 200px; height: 50px;background-color: rgb(255, 255, 255)"></canvas>
    <br>
    <code id="rgb"></code>
  </div>

的数据
也就是jsFiddle。

增编

注意事项：我必须补充一下我在理论上对广色域颜色的了解，因为它与所问的问题间接相关;然而，这只是抽象的信息，因为我从未使用过这些颜色空间，也没有HDR显示器。如果您知道更多，请对此做出贡献（消息/新答案/编辑/否决）。
比rgb（24）更宽的颜色空间是一个很大的主题，但值得一提的是，在2023年底发布时，浏览器已经对它有了很好的支持。你可以从简单但很好的介绍开始，比如this one，或者阅读css 4和githb canvas-color-space pages的规范。
一个简单的测试表明，如果使用backgroundColor: "color(display-p3 0 1 0)"，chart.js不会抱怨，但会将该颜色传递给canvas函数。这意味着可以为chart.js编写宽色域就绪代码。然而，在代码中创建canvas上下文的方式似乎表明，目前用户无法设置颜色空间，即使CanvasRenderingContext2d作为第一个参数传递给Chart构造函数，也不会。

Chartjs 2.7.2，数据集重叠的堆叠折线图背景颜色

1条答案

相关问题

热门标签

最新问答