2016-10-30 14 views
0

私はCanvasJSの背景に透明性を追加しようとしています。 CanvasJSは、キャンバスの背景の色を選択するためにbackgroundColorを使用します。CanvasJS透過的な背景

カラーコードの代わりに「なし」と書いてみましたが、黒い背景があります。

また、バックグラウンドに対して異なる不透明度を選択することができればうれしいです。

答えて

3

透明な背景を設定するには、backgroundColor: "transparent"を設定します。また、どの色にも透明性を持たせたい場合は、例えばbackgroundColor: "rgba(225,150,150,0.5)"のように、rgbaカラーコードを使用することができます。

1

background-color: transparent;と設定できます。色は表示されません。

不透明度は、rgbaを使用して設定できます。白50%の場合、background-color: rgba(255, 255, 255, .5);

私はCanvasを一度も使ったことがなく、そのスクリプトがどのように影響するのか分かりませんが、基本的なCSSではトリックを行います。

0
<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/

0

私は最終的に答えを見つけました。空の文字列(backgroundColor: '')でbackgroundColorを持つことができ、背景色を省略して透明にします。

色に透明度を追加することが可能かどうかはまだ分かりますので、誰かが知っているとコメントしてください。

0

Canvasjs documentによると、あなたは(もちろん、あなたがあなたの目的を解決するために内部の値を変更することができます)透明のために(0、0、0、0)、背景色を設定RGBAを使用することができます:

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(); 
    } 

希望:

関連する問題