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

Instaed of CSS styles, you can use pointPlacement value with number.

Since Highcharts 3.0.2, the point placement can also be numeric, where 0 is on the axis value, -0.5 is between this value and the previous, and 0.5 is between this value and the next. Unlike the textual options, numeric point placement options won't affect axis padding.

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

1 个答案: