Question

我正在尝试在x轴grid.right上对齐绘图。现在我已经为xAxis提供了替代颜色，如下面的视觉效果所示，

但我无法将蓝色条形图垂直对齐，请查看下面的代码和视觉效果，如果有任何解决方案，请告诉我，

下面是我的代码，

function aoassortmentschart() {
$(function () {

    $('#ao-assortments-container').highcharts({
        chart: {
            type: 'column',
            inverted: true,
            verticalAlign: "center"
        },
        credits: { enabled: false },
        title: null,
        subtitle: null,

        xAxis: {
            alternateGridColor: '#F7F7F7',
            gridColor: "#000",
            offset: 120,
            categories : ["Cluster 1", "Cluster 2", "Cluster 3", "Cluster 4", "Cluster 5"],
            tickWidth: 0,
            lineWidth:0,
            min: 0,
            max: 4,
            labels: {
                enabled: true,
                useHTML: true,
                x : 100,
                formatter: function () {
                    return '<div><input type="radio" class="ao-assortment-radio" style="margin-right: 10px" size="10" name="assortmentClusterValue"/><span style="margin-left: 10px ;width: 100px; background: #5867C2; padding: 10px 5px; color : #fff; text-align : center">' + this.value + '</span></div>'
                }
            }
        },
        yAxis: {
            min: 0,
            max: 250,
            pointInterval: 50,
            title: {
                useHTML : true,
                formatter: function(){
                    return '<div class="ao-assortment-title"><span class="shape" style="width: 40px;height:40px;bacground:green">&nbsp;</span>Sales</div>'
                }
            }

        },
        legend : {
            enabled: false,
        },
        plotOptions: {                
            series: {

                    pointWidth: 31,
                    allowPointSelect: false,
                    marginLeft: 50,
                    dataLabels: {
                        align: 'center',
                        enabled: true,
                        useHTML: true,
                        x:-30,
                        formatter: function () {
                            return "$ " + this.y
                        },
                        style : {
                            fontWeight: "normal",
                            textAlign: "center",
                            color: "#fff",

                        }

                    }
                }

        },
        series: [
            {
                name : "Cluster 1",
                data: [200, null, null, null, null],
                color: "#60B3D1"
            },
            {
                name: "Cluster 2",
                data: [null, 120, null, null, null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 3",
                data: [null, null, 240, null, null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 4",
                data: [null, null,null ,170 , null],
                color: "#60B3D1"
            },

            {
                name: "Cluster 5",
                data: [null, null,null ,null ,100 ],
                color: "#60B3D1"
            }
        ]
    });
    // the button action

});

}

如下图所示，我希望蓝色条在网格中间垂直对齐。

Answer 1

您所描述的是默认行为。

每个数据点都有一个系列影响了展示位置 - 图表为您插入的零点留出了一些空间。

如果您将数据放在一个系列中，则问题就会消失。

series: [
  {
    name: "Clusters",
    data: [200, 120, 240, 170, 100],
    color: "#60B3D1"
  }
]

示例：

http://jsfiddle.net/jlbriggs/3d3fuhbb/138/

在高图中将图形对齐网格中心

1 个答案: