ハイチャートチャートオプションbackgroundColor:IE8で黒を表示する「透明」


81

HighchartsbackgroundColor:'transparent'黒を表示するチャートオプションIE 8

histogram = new Highcharts.Chart({
            chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                     backgroundColor:'transparent'
            }

これはI.E 9他では問題なく動作しますが、IE 8とSafariでは失敗します。理由は誰にもわかりませんか?

回答:


128

このソリューションを試してください:

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }

完全に透明ではありません。箱がはっきり見えます。nessa.gpの答えは私のために働いた。
エイドリアンバーソロミュー

26
これは回避策です。でうまく機能しbackgroundColor:nullます。
ViniciusPires 2014

あなたの助けをありがとう:)
russellhoff 2015

3
backgroundColor: 'rgba(255、255、255、0.0)'は完全な透明度を提供します
neo

2
NullはHighCharts6では機能しなくなりました。代わりにbackgroundColor: 'transparent'を使用してください。(最新のすべてのブラウザーとIE11 +でテスト済み)。
Stevethemacguy 2017年

132

これを試してみませんか-

backgroundColor: null

参照:jsfiddle


7
マユレッシュの答えは良い選択肢ですが、これも機能し、よりきれいに見えます。
Capy 2012年

4
完璧!賛成票が10件しかない場合:)これは確かに正しく、エレガントで、ハッキングではないソリューションです。
加藤

4
同意する; これがおそらく一番の答えでしょう。
Geoff 2013

Highchartsがリンク先の.jsファイルを移動したため、フィドルは壊れています。他の場所で述べたように、nullは常に機能するとは限りません。nessa.gpの回答は、Highcharts自身が発見したように、各ブラウザーの最良の値を示しています。
コルトマコーマック2014年

また、黒の背景でwhkhtmltopdfの問題を修正します。
Rostyslav Diachok 2014年

9

私はこれをHighchartsの情報源で見つけました:

TRACKER_FILLの経験的に可能な最低の不透明度

  • IE6:0.002
  • IE7:0.002
  • IE8:0.002
  • IE9:0.00000000001(無制限)
  • IE10:0.0001(エクスポートのみ)
  • FF:0.00000000001(無制限)
  • Chrome:0.000001
  • Safari:0.000001
  • Opera:0.00000000001(無制限)

TRACKER_FILL = 'rgba(192,192,192、' +(hasSVG?0.0001:0.002)+ ')'

したがって、チャートの背景色を「rgba(255,255,255,0.002)」に設定すると、最も重要なブラウザで実行されます。



0

highcharts.jsファイルにアクセスできる場合は、backgroundColor行(約479)に移動し、のように行を変更しbackgroundColor:"rgba(255, 255, 255, 0)"ます。チャートのすべての背景が透明に変更されます


1
そして、ライブラリを更新するたびにそれを行う必要があります。
guioconnor


-2
backgroundColor:'rgba(255, 255, 255, 0.0)',

1
このコードスニペットは問題を解決する可能性がありますが、説明を含めると投稿の品質が向上します。あなたは将来読者のために質問に答えていることを忘れないでください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
クライシュテルス2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.