左对齐y轴标题,标签为Highcharts

时间:2016-07-15 10:35:21

标签: javascript highcharts

在Highcharts中,我想把y轴标题放在顶部,让它与y轴标签左对齐。

我试过这个:

$('#container').highcharts({
    ...
    yAxis: {
        ...
        title: {
            align: 'high',
            text: 'Y-axis title',
            rotation: 0,
            y: -10,

            //To left-align title with labels
            textAlign: 'left', //This is undocumented, but appears to work
            margin: 0
        }
    }
})

然而,我得到一个过多的左边距,这似乎与y轴标题的长度成正比。

Highcharts left-align y-axis title JsFiddle

看起来保证金计算没有考虑textAlign: 'left'设置。

更新:我应该说我目前的“解决方案”是设置chart.marginLeft的保证金,但这并不理想,因为它是固定的。左边距应该足够大,以容纳轴标签(无论它们多大)。

如何将y轴标题与标签左对齐并具有合理的左边距?

1 个答案:

答案 0 :(得分:0)

我决定使用marginLeft(是的,您正确阅读),但基于轴标签的长度,以提供所需的灵活性。

我在这里做的是将图表选项设置为名为chartOptions的变量。然后我计算了轴标题的长度(字符数),根据该值设置marginLeft属性,然后用修改后的图表选项绘制图表。

chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);

这是工作小提琴:http://jsfiddle.net/brightmatrix/6eeuay58/9/

我通过增加一些数据点来测试不同的数字。

如果这对您有用且有帮助,请与我们联系。