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