CanvasJS透明背景

Question

我正在尝试为我的 CanvasJS 背景添加透明度。 CanvasJS 使用 backgroundColor 来选择 canvas.

的背景颜色

我试着写 "None" 而不是颜色代码，但它给了我黑色背景。

此外，如果能够为背景选择不同的不透明度，那就太好了。

Answer 1

可以设置background-color: transparent;，不显示颜色。

可以使用 rgba 设置不透明度。对于白色 50%，它将是 background-color: rgba(255, 255, 255, .5);

我从未使用过 CanvasJs，也不知道该脚本会如何影响事物，但在基本的 CSS 中，这些就可以了。

Answer 2

<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

完整演示http://jsfiddle.net/canvasjs/7b0xdcwv/

Answer 3

我终于找到了答案。您可以只使用带有空字符串 (backgroundColor:'') 的 backgroundColor，它会忽略背景色并使其保持透明。

我仍然想知道是否可以为颜色添加透明度，所以如果有人知道，请发表评论。

Answer 4

要设置透明背景，您可以设置 backgroundColor: "transparent"。如果您想为任何颜色赋予透明度，您可以使用 rgba 颜色编码，例如：backgroundColor: "rgba(225,150,150,0.5)".

Answer 5

根据Canvasjs document，您将能够设置背景颜色，使用 rgba(0, 0, 0, 0) 进行透明处理（当然您可以更改内部值来满足您的目的）：

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Title with Background Color",
        padding: 5,
        backgroundColor: rgba(0, 0, 0, 0),
      },
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        ]
      }
      ]
    });

    chart.render();
  }

希望对您有所帮助:)

CanvasJS透明背景

CanvasJS Transparent Background

html

css

canvasjs