Highcharts 柱形图 - 渲染后手动转换列

Question

我有一个在 Highcharts 中完成的基本柱形图。

我想“移动”（= 使用 CSS 转换：translate()）图表中的每一列。

我尝试使用 CSS 样式来实现这一点，但它显然破坏了 Highcharts 呈现的定位。

有什么办法可以改变回调函数中已有的元素吗？ 谢谢

代码： http://jsfiddle.net/tomexx/vrh5kzzz/10/

$(function () {
    var config = {
        chart: {
            type: 'column',
            backgroundColor: 'rgba(40,40,40,1)'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            categories: [
                'Likes',
                'Comments',
                'Shares'
            ],
            tickColor: 'rgba(83,83,83,1)',
            gridLineColor: 'rgba(83,83,83,1)',
            gridLineWidth: 1,
            minorGridLineColor: 'rgba(83,83,83,1)',
            lineColor: 'rgba(83,83,83,1)'

        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            gridLineColor: 'rgba(83,83,83,1)',
            minorGridLineColor: 'rgba(83,83,83,1)',
            lineColor: 'rgba(83,83,83,1)'
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0,
                animation: false,
                enableMouseTracking: false,
            }
        },
        series: [{
            color: 'rgba(126,200,54,1)',
            data: [44, 73, 20],
            pointPadding: 0.3,
            pointPlacement: 0.16
        }, {
            color: 'rgba(43,205,203,1)',
            data: [150, 88, 20],
            pointPadding: 0.3,
            pointPlacement: 0.04
        }, {
            color: 'rgba(168,68,214,1)',
            data: [63, 33, 10],
            pointPadding: 0.3,
            pointPlacement: -0.04
        }, {
            color: 'rgba(255,191,0,1)',
            data: [86, 245, 222],
            pointPadding: 0.3,
            pointPlacement: -0.12
        }]
    };

    $('#container').highcharts(config);
});

Answer 1

代替 CSS 样式，您可以使用带有数字的 pointPlacement 值。

从 Highcharts 3.0.2 开始，点的位置也可以是数字，其中 0 在轴值上，-0.5 在这个值和前一个值之间， 0.5 在这个值和下一个值之间。与文字不同 选项，数字点放置选项不会影响轴填充。