javascript - Highcharts 。如何为图表网格设置固定宽度，不包括标签？

Question

如何为图表网格设置固定宽度，不包括标签？固定宽度应在列之间、列处和沿边缘。标签区域必须是动态的。

列之间的宽度 - 24px。列宽 - 28px。边缘和列之间的宽度 - 12px。

网格宽度 - 104 像素。

https://snag.gy/8twGXT.jpg

http://jsfiddle.net/2481ht7L/15/

我试图通过 css 设置“g”标签的宽度，但没有成功。

<g class="highcharts-grid highcharts-yaxis-grid"></g>

Answer 1

在 load 事件中，您可以使用计算的 marginRight 属性更新图表，并将 pointPadding 调整为所需的尺寸:

chart: {
    ...,
    type: 'column',
    marginRight: 0,
    marginLeft: 0,
    events: {
        load: function() {
            if (this.chartWidth < 104) {
                this.setSize(104);
            } else {
                this.update({
                    chart: {
                        marginRight: this.chartWidth - 104
                    }
                }, true, false, false);
            }
        }
    }
},
plotOptions: {
    series: {
        grouping: false,
        groupPadding: 0,
        pointPadding: 0.23
    }
}

现场演示: http://jsfiddle.net/BlackLabel/kzdLyp1g/

API 引用:

https://api.highcharts.com/highcharts/chart.marginRight

https://api.highcharts.com/class-reference/Highcharts.Chart#update

https://api.highcharts.com/class-reference/Highcharts.Chart#setSize