高图表呈现的Internet Explorer 10 [英] High Charts Rendering on Internet Explorer 10

问题描述

Highcharts条形图不会呈现良好。问题是在这个小提琴转载。在IE 10打开时呈现的问题可以看出（铬效果很好）。

Highcharts Bar chart doesn't render well when they are put inside HTML Table. Issue is reproduced in this Fiddle. Rendering problem can be seen when opened in IE 10(works well in chrome).

 var options = {
    colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
    chart: {
        renderTo: 'Chart3container',
        type: 'bar',
        backgroundColor: 'black',
        borderColor: 'black',
        borderWidth: 0,
        className: 'dark-container',
        plotBackgroundColor: 'black',
        plotBorderColor: '#000000',
        plotBorderWidth: 0
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Count Per Category',
        style: {
            color: 'white',
            font: 'normal 22px "Segoe UI"'
        },
        align: 'left'
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        style: {
            color: '#F0F0F0'
        }
    },
    categories: {
        enabled: 'true'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        itemStyle: {
            font: '9pt Segoe UI',
            color: 'white'
        },
        itemHoverStyle: {
            color: 'grey'
        }
    },
    xAxis: {
        categories: BarData.categories,
        tickInterval: 1,
        labels: {
            enabled: true,
            style: {
                color: 'white'
        }
    },
        title: {
            enabled: false
        },
        gridLineColor: '#222222'
    },
    yAxis: {
        title:
        {
            enabled: true,
            text: "Document Count",
            style: {
                fontWeight: 'normal',
                color: 'white'
            }
        },
        labels: {
            style: {
                color: 'white'
        }
    },
        gridLineColor: '#222222'
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            cursor: 'pointer'
        }
    },
    series: []
};

options.series = BarData.bardataarray;

chart1 = new Highcharts.Chart(options);

}）;

在外面摆桌子，效果很好。下面是相关的小提琴。结果
我需要表正确对齐。

When put outside table, it works well. Here is the related Fiddle.
I need table for proper alignment.

推荐答案

您可以禁用动画或使用CSS样式喜欢这里：

You can disable animation or use CSS styles like here:

<table>
        <tr>
            <td style="width:287px;height: 278px; vertical-align: top;position:relative;">
                   <div id="container1" style="position:absolute;height: 270px; width:287px;overflow: hidden;"></div>
                </td>
        </tr>
</table>

相关主题： https://github.com/highslide-software/highcharts .COM /问题/ 1157

这篇关于高图表呈现的Internet Explorer 10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！