Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

Posted 2023-02-16

【中文标题】Highcharts 图表选项 backgroundColor:\'transparent\' 在 IE 8 上显示黑色

【英文标题】：Highcharts chart option backgroundColor:'transparent' showing black on IE 8Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

【发布时间】：2011-12-05 21:19:31

【问题描述】：

Highcharts 图表选项backgroundColor:'transparent' 在IE 8 上显示为黑色

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

这在 I.E 9 和其他人上运行良好，但在 I.E 8 和 Safari 上失败，有人知道为什么吗？

【参考方案1】：

也许你必须写

filter:0 !important;

在你的 CSS 中。

【参考方案2】：

你能试试这个吗-

backgroundColor: null

参见：jsfiddle

【讨论】：

Mayuresh 的回答是一个不错的选择，但这也很有效，而且看起来更干净。

完美！如果我只有 10 票可以给 :) 这当然是正确、优雅、非 hack 的解决方案。

我同意；这应该是最佳答案。

Highcharts 已经移动了你链接到的 .js 文件，你的小提琴坏了。如其他地方所述，null 并不总是有效。 nessa.gp 的回答给出了 Highcharts 自己发现的每个浏览器的最佳案例值。

它还修复了黑色背景的 whkhtmltopdf 问题。

【参考方案3】：

试试这个解决方案：

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

【讨论】：

不是完全透明的。盒子清晰可见。 nessa.gp 的回答对我有用。

这是一种解决方法。使用backgroundColor:null 效果更好。

感谢您的帮助。 @ViniciusPires 你的解决方案对我不起作用（我看到黑色背景）。

backgroundColor:'rgba(255, 255, 255, 0.0)' 会给你完全的透明度

Null 不再适用于 HighCharts 6。请改用 backgroundColor: 'transparent'。 （在所有现代浏览器和 IE11+ 上测试）。

【参考方案4】：

如果您可以访问 highcharts.js 文件，请转到 backgroundColor 行（大约 479）并更改行，如 backgroundColor:"rgba(255, 255, 255, 0)"。它会将图表的所有背景更改为透明

【讨论】：

然后每次更新库时都必须这样做。

【参考方案5】：

我在 Highcharts 来源中找到了这个：

TRACKER_FILL 的经验最低可能不透明度

IE6：0.002 IE7：0.002 IE8：0.002 IE9：0.00000000001（无限制） IE10：0.0001（仅导出） FF：0.00000000001（无限制） 铬：0.000001 Safari：0.000001 歌剧：0.00000000001（无限制）

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

因此，您可以将图表背景颜色设置为 'rgba(255,255,255,0.002)'，它可以在最重要的浏览器中运行。

【参考方案6】：

backgroundColor: 'transparent' 如果您需要类型安全，也可以使用。

【参考方案7】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案8】：

你应该使用这个：

.highcharts-background 
   fill: transparent;

Documentation

完整示例：

Highcharts.chart('container', 
    chart: 
        type: 'line',
        styledMode: true
    ,
    title: 
        text: 'Chart border and background by CSS'
    ,

    xAxis: 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    ,

    legend: 
        layout: 'vertical',
        floating: true,
        align: 'left',
        x: 100,
        verticalAlign: 'top',
        y: 70
    ,
    series: [
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    ]
);

@import "https://code.highcharts.com/css/highcharts.css";

.highcharts-background 
    fill: #efefef;
    stroke: #a4edba;
    stroke-width: 2px;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

【讨论】：

你摇滚。谢谢你。其他解决方案都不适合我