0

将 Highcharts 条形图放在 HTML 表格中时渲染效果不佳。问题在此Fiddle中重现。在 IE 10 中打开时可以看到渲染问题（在 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);

});

放在桌子外面时，效果很好。这是相关的Fiddle。
我需要表格进行正确对齐。

4

1 回答 1

0

您可以禁用动画或使用 CSS 样式，如下所示：

<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/issues/1157

于 2013-10-30T12:14:24.273 回答