Highcharts 图表选项背景颜色:“透明”在 IE 8 上显示黑色

发布于 2024-12-09 03:42:40 字数 371 浏览 0 评论 0原文

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

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

这在 IE 9 和其他浏览器上效果很好,但在 IE 8 和 Safari 上失败有人知道为什么吗?

Highcharts chart option backgroundColor:'transparent' showing black on IE 8

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

This works fine on I.E 9 and others but fails on I.E 8 and Safari anyone has any idea why ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

梦在深巷 2024-12-16 03:42:40

你能试试这个 -

backgroundColor: null

参见:jsfiddle

Can you try this -

backgroundColor: null

See on: jsfiddle

暮色兮凉城 2024-12-16 03:42:40

尝试这个解决方案:

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

Try this solution:

histogram = new Highcharts.Chart({
                chart: { renderTo: 'histogram', defaultSeriesType: 'bar',
                         backgroundColor:'rgba(255, 255, 255, 0.0)'
                }
似狗非友 2024-12-16 03:42:40

我在 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
  • 歌剧:0.00000000001(无限制)

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

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

I found this in Highcharts sources:

Empirical lowest possible opacities for TRACKER_FILL

  • IE6: 0.002
  • IE7: 0.002
  • IE8: 0.002
  • IE9: 0.00000000001 (unlimited)
  • IE10: 0.0001 (exporting only)
  • FF: 0.00000000001 (unlimited)
  • Chrome: 0.000001
  • Safari: 0.000001
  • Opera: 0.00000000001 (unlimited)

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

So you can set the chart background color to 'rgba(255,255,255,0.002)' and it runs in the most important browsers.

最近可好 2024-12-16 03:42:40

如果您需要类型安全,backgroundColor: 'transparent' 也可以工作。

backgroundColor: 'transparent' also working if you need type safety.

可遇━不可求 2024-12-16 03:42:40

您应该使用这个:

.highcharts-background {
   fill: transparent;
}

文档

完整 例子:

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>

You should use this :

.highcharts-background {
   fill: transparent;
}

Documentation

Full example:

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>

音盲 2024-12-16 03:42:40

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

If you can access the highcharts.js file go to the backgroundColor line (around 479) and change line like backgroundColor:"rgba(255, 255, 255, 0)". It will change all backgrounds of the charts to transparent

感性不性感 2024-12-16 03:42:40

可能你必须写

filter:0 !important;

在你的CSS中。

May be you have to write

filter:0 !important;

in your css.

无畏 2024-12-16 03:42:40
backgroundColor:'rgba(255, 255, 255, 0.0)',
backgroundColor:'rgba(255, 255, 255, 0.0)',
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文